2017-02-05 7 views
4

定義済みのパスを持つ特定のモジュールですべてのルートを取得し、ngForを使用してそれらをループし、コンポーネントhtmlのリンクの動的リストを作成したいとします。Angular 2 Routes - ngFor?を使用してルートからダイナミックなルータリンクを作成することは可能ですか?

ngFor例(overview.component.html):

<li *ngFor="let item of items; let i = index;"> 
    <a routerLink="/{route.path}">{route.path}</a> 
</li> 

モジュール例(base.module.ts):

... 

const routerConfig = [ 
    { 
    path: '', 
    component: BaseComponent, 
    children: [ 
     { 
     path: '', 
     component: OverviewComponent 
     }, 
     { 
     path: 'group-one', 
     component: OverviewComponent 
     }, 
     { 
     path: 'group-one/:id', 
     component: DetailComponent 
     }, 
     { 
     path: 'group-two', 
     component: OverviewComponent 
     }, 
     { 
     path: 'group-two/:id', 
     component: DetailComponent 
     } 
    ] 
    } 
]; 

@NgModule({ 
    imports: [ 
    RouterModule.forChild(routerConfig) 
    ] 
    ... 
}) 
export class BaseModule { } 

などActivatedRoute、ルータ、各種の実験を試みた後、Iこの情報が利用できるようになっているオブジェクトを見つけることができませんでした。

これは現在、角度2ルータで可能ですか?

どうすればこの問題を解決できますか?

+0

おそらく[router.config](https://angular.io/docs/ts/latest/api/router/index/Router-class.html#!#config-anchor)が役立つ可能性があります。あなたはこれで遊ぶことができます。 – developer033

+0

@ developer033 router.config [i] .pathを通るループは、トップレベルルートのすべてをリストしますが、ネストされたモジュールに固有のものはリストしません。あなたはActivatedRoute経由でどこかにアクセスできると思うでしょう... – dustintheweb

+2

'console.log(this.activatedRoute.routeConfig)'を試しましたか? – developer033

答えて

2

このコード

<a routerLink="/{route.path}"> 

は、おそらくどちらかが欲しい

ルートパスとして文字通り/{route.path}を渡し

<a [routerLink]="'/' + route.path"> 

または

<a routerLink="/{{route.path}}"> 

式を評価する角度のために、バインディングは(同時に決して両方)[]または{{}}の正確に一つを持っている必要がありません

[propName]="..." 

または

propName="{{...}}" 

後には、常に結果をstringifiesため、適切ではありませんオブジェクトを渡す。

関連する問題