Saya mencoba melakukan perutean sederhana dari komponen anak ke komponen anak lain dari komponen induk. router-outlet
didefinisikan dalam komponen induk. Inilah cara saya mencoba mencapainya:
parent.ts
import {Component} from 'angular2/core';
import {RouteConfig,ROUTER_PROVIDERS,ROUTER_DIRECTIVES} from 'angular2/router';
import {bootstrap} from 'angular2/platform/browser';
import {FirstChildCmp} from "./first_child";
import {SecondChildCmp} from "./second_child";
@Component({
selector: 'app',
template: `
<router-outlet></router-outlet>
`,
directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
{path: '/first_child', component: FirstChildCmp, name: 'FirstChild', useAsDefault:true},
{path: '/second_child',component: SecondChildCmp, name:'SecondChild'}
])
export class ParentCmp{}
bootstrap(ParentCmp,[
ROUTER_PROVIDERS
]);
anak_pertama.ts
import {Component} from 'angular2/core';
import {ROUTER_DIRECTIVES} from 'angular2/router';
@Component({
selector: 'child',
template: `
<a [routerLink]="[SecondChild]">Go to second child</a>
`,
directives: [ROUTER_DIRECTIVES]
})
export class FirstChildCmp{}
anak_kedua.ts
import {Component} from 'angular2/core';
@Component({
selector: 'child',
template: `
This is second child.
`
})
export class SecondChildCmp{}
Ketika pengguna mengklik Go to second child
saya ingin menampilkan template komponen anak kedua. Tapi saya mendapatkan kesalahan berikut:
Komponen "FirstChildCmp" tidak memiliki konfigurasi rute.
Tapi saya tidak ingin mendefinisikan konfigurasi di FirstChildCmp
melainkan saya ingin menggunakan konfigurasi orang tua. Saya telah membuat ulang masalah tersebut di plunker di sini