कोणीय - रूटपेरम्स

Question

मैं वर्तमान में कोणीय अल्फा 45 का परीक्षण कर रहा हूं, विशेष रूप से रूटिंग, और पैरामीटर के साथ रूटिंग लागू करके समस्याएं मिलीं। मैंने एक विशिष्ट इकाई के अपने विस्तार दृश्य के लिए एक घटक बनाया है। <h1>Projekt Details: {{id}}</h1> RouteConfig इस तरह दिखता है:

@Component({ 
    templateUrl: 'app/components/projekt/projekt.detail.html', 
    directives: [FORM_DIRECTIVES] 
}) 
export class ProjektDetailComponent { 
    id: string; 
    constructor(params: RouteParams){ 
     this.id = params.get('id'); 
    } 
} 

टेम्पलेट इस तरह लग रही है, बस पैरामीटर "आईडी" प्रदर्शित

@RouteConfig([ 
    { path: '/', component: StartComponent, as:'Start'} , 
    { path: '/projekte', component: ProjektOverviewComponent, as:'Projekte'}, 
    { path: '/projekte/:id', component: ProjektDetailComponent, as:'ProjektDetail'}, 
    { path: '/projekte/neu', component: NeuesProjektComponent, as:'ProjektNeu'}  
]) 

लिंक और RouteConfig है, जो ऊपर प्रदर्शित होता है, कर रहे हैं कोणीय दस्तावेज में उदाहरणों की तरह। <a [router-link]="['/ProjektDetail', {'id': '1'}]" class="btn btn-default">Details</a>

तो जब मैं विवरण दृश्य (जैसे 127.0.0.1:8080/src/#/projekte/1) पर नेविगेट मैं मिल निम्न त्रुटि है, जो अपने ब्राउज़र की कंसोल में प्रदर्शित किया जाता है (मैं परीक्षण किया है एज, फ़ायरफ़ॉक्स 42, क्रोम 46) के साथ:

EXCEPTION: Cannot resolve all parameters for ProjektDetailComponent(?). Make sure they all have valid type or annotations. 


    18:25:41.376 EXCEPTION: Cannot resolve all parameters for ProjektDetailComponent(?). Make sure they all have valid type or annotations.1 angular2.dev.js:21984:9 
BrowserDomAdapter</BrowserDomAdapter.prototype.logError() angular2.dev.js:21984 
BrowserDomAdapter</BrowserDomAdapter.prototype.logGroup() angular2.dev.js:21995 
ExceptionHandler</ExceptionHandler.prototype.call() angular2.dev.js:4426 
PlatformRef_</PlatformRef_.prototype._initApp/</<() angular2.dev.js:19685 
NgZone</NgZone.prototype._notifyOnError() angular2.dev.js:10746 
NgZone</NgZone.prototype._createInnerZone/errorHandling.onError() angular2.dev.js:10654 
run() angular2.dev.js:141 
NgZone</NgZone.prototype._createInnerZone/<.$run/<() angular2.dev.js:10669 
zoneBoundFn() angular2.dev.js:111 
lib$es6$promise$$internal$$tryCatch() angular2.dev.js:1507 
lib$es6$promise$$internal$$invokeCallback() angular2.dev.js:1519 
lib$es6$promise$$internal$$publish() angular2.dev.js:1490 
[4]</</</<() angular2.dev.js:219 
NgZone</NgZone.prototype._createInnerZone/<.$scheduleMicrotask/</microtask() angular2.dev.js:10701 
run() angular2.dev.js:138 
NgZone</NgZone.prototype._createInnerZone/<.$run/<() angular2.dev.js:10669 
zoneBoundFn() angular2.dev.js:111 
lib$es6$promise$asap$$flush() angular2.dev.js:1301 

आप किसी भी सुझाव है?

Answer 1

@EricMartinez के रूप में उल्लेख किया गया है कि आपको रूटपेराम सही तरीके से आयात करना है। मैं अपने प्लंकर के साथ खेल रहा था और वही त्रुटियां प्राप्त कर रहा था।

मुझे एहसास हुआ कि मैं 'angular2/angular2' से आयात किया गया था और से 'angular2/router'

आयात करने के लिए की जरूरत है यहाँ एक plunker करता है कि आप के लिए, लेकिन एक "कार" के घटक के साथ वास्तव में क्या देख रहे है। Plunker

Answer 2

मैं भी एक ही समस्या मिल गया जब मेरी DataService & RouteParams इंजेक्शन लगाने और निर्माता में @Inject का इस्तेमाल किया था। मैंने जो किया था यह रहा।

import {Component, Inject, View} from 'angular2/angular2'; 
import {RouteParams} from 'angular2/router'; 

@Component({ 
    selector: 'about' 
}) 
@View({ 
    template: 'This is {{id}} about page {{name}}' 
}) 
export class AboutComponent 
{ 
    name: string = "Sandeep"; 
    id: number; 
    constructor(@Inject(RouteParams) params: RouteParams) 
    { 
     this.id = +params.get('id'); 
    } 
} 

आशा है कि इससे आपकी मदद मिलेगी।

Answer 3

यह आपके पास इस मुद्दे के साथ नहीं है, लेकिन यह कहने योग्य है कि आपको कोणीय 2 आरसी 3 या उच्चतर में माइग्रेट करते समय एक ही समस्या का सामना करना पड़ेगा। मार्ग पूरी तरह से बदल गया है, इसलिए आपका घटक फिर से एक ही अपवाद फेंकने में असफल हो जाएगा।

आरसी 3 या उससे ऊपर में आपको नामों के बिना अपने मार्गों को फिर से लिखना होगा और आपके घटक को अपने पैरामीटर पढ़ने के लिए '@ कोणीय/राउटर' से सक्रिय रूट आयात करने की आवश्यकता होगी। देखें:

constructor(private activatedRoute: ActivatedRoute) { 

    this.activatedRoute.params.subscribe(params => { 
      this.categoryUrl = params['categoryUrl']; 

} 

Answer 4

कोणीय 2.rc3 + के मामले में, आप इस स्निपेट का उपयोग कर सकते हैं।

post.component.ts

import { Component } from '@angular/core'; 
import { ActivatedRoute } from '@angular/router'; 

@Component(
    selector: 'projekte' 
) 
export class ProjekteComponent { 
    private id: string; 
    constructor(private route: ActivatedRoute) { 
    } 

    private sub; 
    ngOnInit() { 
     this.sub = this.route.params.subscribe(params => { 
      this.id = params['id']; 
     }); 
    } 
    ngOnDestroy() { 
     this.sub.unsubscribe(); 
    } 
} 

app.routes.ts

export const routes: RouterConfig = [ 
    { path: 'projekte/:id', component: ProjekteComponent } 
]; 
export const appRouterProviders = [ 
    provideRouter(routes); 
]; 

main.ts

import { bootstrap } from '@angular/platform-browser-dynamic'; 

import { AppComponent } from './app.component'; 
import { appRouterProviders } from './app.routes'; 

bootstrap(AppComponent, [ 
    appRouterProviders 
]); 

इस मदद की उम्मीद है!