कोणीय 2 आरसी 1 बाल मार्ग परिभाषित किए गए लेकिन

Question

बीटा/... के लिए काम करने के लिए क्या उपयोग किया जाता है अब काम नहीं कर रहा है। नए नए आरसी 1 राउटर के साथ, मैं बाल रूटिंग कैसे कर सकता हूं?

फ़ोल्डर संरचना

app 
    |--home/ 
    | |--home.component.ts 
    |--login/ 
    | |--login.ts 
    |--appShell/ 
    | |--app.component.ts 
    |--apps/ 
     |--hero/ 
      |--hero-shell.component.ts 
      |--horees.component.ts 
      |--hero-detail.component.ts 

योजना बनाई नेविगेशन है

app.component -> home.component -> heroshell.component -> heroes.component 

app.component.ts मार्गों

@Routes([ 
    { path: '/heroshell', component: HeroShellComponent }, 
    { path: '/home', component: HomeComponent }, 
    { path: '/login', component: Login }, 
]) 
export class AppComponent implements OnInit { 
    title = 'Apps';  
    constructor(public _auth: Authentication, 
       public router: Router, 
       private _dialogService: DialogService 
      ) {}  
    ngOnInit() { 
    this.router.navigate(['/login']); 
    } 
    ....... 

एक बार सफल में, लॉग इन वर्ग होगा

लॉग इन

HomeComponent.ts से मैं

this.router.navigate(['/heroshell']); 

अब तक तो अच्छा, कोई समस्या नहीं कर सकते हैं। नायक-shell.component.ts में मैं हीरो-shell.component.html में बच्चे मार्ग

@Component({ 
    selector: 'my-app1', 
    templateUrl: 'app/apps/hero/hero-shell.component.html', 
    styleUrls: ['app/appshell/app.component.css'], 
    directives: [ROUTER_DIRECTIVES], 
    providers: [HeroService] 
}) 

@Routes([ 
    { path: 'heroes', component: HeroesComponent }, 
    { path: 'dashboard', component: DashboardComponent }, 
    { path: 'hero/:_id', component: HeroDetailComponent}, 
    ]) 
export class HeroShellComponent { // implements OnInit 
    title = 'Hero Sample App'; 

    constructor(public _auth: Authentication, 
       public router: Router 
      ) {} 
} 

है

<my-app1> 

<h1>{{title}}</h1> 
<!--<button *ngIf="_auth.loggedIn" (click)="onLogout()">Logout</button>--> 

<nav> 
    <a [routerLink]="['dashboard']">Dashboard</a> 
    <a [routerLink]="['heroes']">Heroes</a> 
</nav> 
<router-outlet></router-outlet> 

</my-app1> 

ध्यान दें कि पथ केवल 'heroes' हो सकता है। अगर मैं [राउटरलिंक] और @ रूट्स में '/heroes' में बदलता हूं तो यह काम नहीं करेगा। क्या कुछ समझाने में मदद कर सकते हैं क्यों?

और इसलिए यह अब बाल मार्गों को पहचान सकता है। राउटरलिंक नायकों पर क्लिक करें नायक सूची प्रदर्शित करेगा। लेकिन जब मैं

this._router.navigate(['hero/'+hero._id]); 

द्वारा HeroesComponent से यह विस्तृत यह

browser_adapter.ts:78 EXCEPTION: Error: Uncaught (in promise): 
Cannot match any routes. Current segment: 'hero'. 
Available routes: ['/heroshell', '/home', '/login']. 

यह बहुत ही अजीब है के साथ फट गया था। अगर यह बच्चे के मार्गों को नहीं पहचानता है तो मैं पहले ही हीरोज कॉम्पोनेंट में कैसे जा सकता हूं? और अब बच्चे के मार्ग अभी गायब हो गए हैं।

अगर मैं का उपयोग

this._router.navigate(['hero/'+hero._id],this.currSegment); 

यह एक अलग त्रुटि

browser_adapter.ts:78 EXCEPTION: 
Error: Uncaught (in promise): Component 'HeroesComponent' does not have route configuration 

तो यह है कि सभी बच्चे घटकों बार-बार उन पर @Routes करना होगा मतलब है दे देंगे?

Answer 1

ध्यान दें कि पथ केवल 'हीरो' हो सकता है। अगर मैं [राउटरलिंक] और @ रूट्स को 'नायकों' में बदलता हूं तो यह काम नहीं करेगा। क्या कुछ समझाने में मदद कर सकते हैं क्यों?

वास्तव में बच्चे रूटर में पथ शामिल कर सकते हैं "/" उपसर्ग के रूप में लेकिन बदलते routerLink "/ नायकों" यह काम नहीं किया है, क्योंकि "/" नेविगेशन पथ में उपसर्ग जड़ रूटर का उपयोग कर का समाधान हो जाएगा और नहीं है "/ नायकों" पथ। "नायक" पथ काम करता है क्योंकि इसे वर्तमान राउटर का उपयोग करके हल किया जाएगा और आपने वर्तमान बाल राउटर में पथ को परिभाषित किया है।

यह ._router.navigate (['नायक /' + hero._id]);

किसी खंड के बिना "नेविगेट" को कॉल करना रूट राउटर का उपयोग करके हल किया जाएगा। इसका मतलब है कि आप पूर्ण नेविगेशन करना चाहते हैं। जाहिर है यह काम नहीं करेगा।

यह ._router.navigate (['नायक /' + hero._id], this.currSegment);

यह भी काम नहीं करता क्योंकि आप हीरोज कॉम्पोनेंट और "नायकों" सेगमेंट में हैं, घटक में कोई राउटर कॉन्फ़िगरेशन नहीं है। सही कॉल होना चाहिए:

this._router.navigate(['../hero', {_id: hero._id}], this.currSegment);