角2の動的テンプレート

Question

私は動的な経路を持つnavbarを持っています。私は1つのテンプレートも使いたいと思います。だから私はhttp://domain/com/aaaへのリクエストを行う場合、私は配列からgettinデータです。

どうすれば実現できますか？

navbar.component.html：

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
    <ul class="nav navbar-nav"> 
    <li *ngFor="let item of items"><a [routerLink]="[item.slug]" [routerLinkActive]="['is-active']">{{item.name}}</a></li> 
    </ul> 
</div><!-- /.navbar-collapse --> 

navbar.componetns.ts：

items = [ 
    { id:"1" , slug: "aaa" , name: "AAA"}, 
    { id:"2" , slug: "bbb" , name: "BBB"}, 
    { id:"3" , slug: "ccc" , name: "CCC"}, 
    { id:"4" , slug: "ddd" , name: "DDD"} 
]; 

app.routing.ts：

const APP_ROUTES: Routes = [ 
    {path: '' , component: HomeComponent} 
]; 

export const routing = RouterModule.forRoot(APP_ROUTES); 

item.service：

export class ItemService { 
    getItems() { 
    return [ 
     { id:"1" , slug: "aaa" , name: "AAA"}, 
     { id:"2" , slug: "bbb" , name: "BBB"}, 
     { id:"3" , slug: "ccc" , name: "CCC"}, 
     { id:"4" , slug: "ddd" , name: "DDD"} 
    ]; 
    } 
    constructor() { } 
} 

Answer 1

あなたはルートが角度成分ではないが発生、ルートコンポーネントのparamsを設定することはできません。これが動作しない理由は、あなたが角度 コンポーネントではありません置く いるあなたのindex.htmlということでこのコメントにhttps://github.com/angular/angular/issues/1858#issuecomment-151326461

を参照してください。このため、Angularはこの要素をコンパイルしません。そして Angularは、実行時に属性値を読み取ることはありません。 のコンパイル時にのみ、値が読み取られます。そうしないと、パフォーマンスが低下します。

したがって、1つのレベルの共通コンポーネントが必要で、ルータにparamとして追加する必要があります。

const APP_ROUTES: Routes = [ 
    {path: '' , component: HomeComponent}, 
    {path: '/common:slug' , component: CommonComponent} 
];