Angular 2バージョン:2.0.0-alpha.44
私はAngular 2。 http://plnkr.co/edit/Y5doqU1WcEe4Ldr7KfPJ )
以下は、クイックリファレンスのコードです。私は以下のルーティングを達成しようとしています
App
/\
/ \
HomeCmp HelloCmp
\
\
ChildCmp
以下はパスの設定方法です
import {bootstrap, bind, Component, View} from 'angular2/angular2'
import {RouteConfig, RouteParams, ROUTER_DIRECTIVES, APP_BASE_HREF, ROUTER_BINDINGS} from 'angular2/router'
@Component({
selector: 'child-cmp'
})
@View({
template: `
<div>
<h3>Whats up</h3>
</div>
`
})
class ChildCmp { }
// ************************ Hello Component ***********************************
@Component({
selector: 'hello-cmp'
})
@View({
template: `
<div>
<h2>Hello there !</h2>
<router-outlet></router-outlet>
</div>
`,
directives: ROUTER_DIRECTIVES
})
@RouteConfig([
{path: '/', component: ChildCmp, as: 'ChildCmp'}
])
class HelloCmp { }
//************************** HOME Component ***********************************
@Component({
selector: 'home-cmp'
})
@View({
template: `
<div>
<h2>Welcome Home</h2>
</div>
`
})
class HomeCmp {}
//************************* APP Component *************************************
@Component({
selector: 'app-cmp'
})
@View({
template: `
<div>
<h1>Hello {{message}}!</h1>
<a [router-link]="['./HomeCmp']">home</a>
<a [router-link]="['./HelloCmp']">hello</a>
<hr>
<router-outlet></router-outlet>
</div>
`,
directives: ROUTER_DIRECTIVES
})
@RouteConfig([
{path: '/', component: HomeCmp, as: 'HomeCmp'}
{path: '/hello/...', component: HelloCmp, as: 'HelloCmp'}
])
export class App {
message:string = 'world';
}
bootstrap(App, [
ROUTER_BINDINGS,
bind(APP_BASE_HREF).toValue(location.pathname)
]);
子ルートを削除すると正常に動作します。しかし、子ルートではエラーが発生します。
EXCEPTION: Link "["HelloCmp"]" does not resolve to a terminal or async instruction. in [null]
私は言及された記事に従いました here 。 しかし、それを機能させることはできません。誰か助けてもらえますか?ありがとう
routerLink
に子コンポーネントをインポートするだけで、コードは正常に機能します。例えば:
<a [routerLink]="['./HelloCmp','ChildCmp']">hello</a>
コードの作業計画は次のとおりです。 Plunker Code
このルーティングの詳細については、githubでこの問題を参照してください here
Angular 2 betaの時点で、いくつかの変更があります:
router-link
はrouterLinkに変更されました
このようにrouterLinkの時点で子を提供する代わりにuseAsDefault : true
を使用することもできます-
{パス: '/ blabla'、コンポーネント:ABC、名前:ABC、useAsDefault:true}
Angular4子ルーティング-
最初にルート構成を定義します。各ルートにはchildrenというプロパティがあり、このルートの子ルートを定義できます。
const routes: Routes = [
{path: '', redirectTo: 'home', pathMatch: 'full'},
{path: 'find', redirectTo: 'search'},
{path: 'home', component: HomeComponent},
{path: 'search', component: SearchComponent},
{
path: 'artist/:artistId',
component: ArtistComponent,
children: [
{path: '', redirectTo: 'tracks'}, ①
{path: 'tracks', component: ArtistTrackListComponent}, ②
{path: 'albums', component: ArtistAlbumListComponent}, ③
]
},
{path: '**', component: HomeComponent}
];
<h1>Artist</h1> <p> <a [routerLink]="['./tracks']">Tracks</a> | <a [routerLink]="['./albums']">Albums</a> </p> <router-outlet></router-outlet>