角2动态模板

Question

我有一个带动态路由的导航条，我还想使用1个模板。因此，如果我向http://domain/com/aaa发出请求，我将从数组获取gthe数据。

我怎样才能做到这一点？

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

不能在根组件中设置参数，因为根不是角分量。请参阅以下评论https://github.com/angular/angular/issues/1858#issuecomment-151326461

这不起作用的原因是，您放置的index.html不是一个角组件。正因为如此，角不会编译这个元素。在运行时不读取属性值，只在编译时读取属性值，否则会影响性能。

因此，您需要一个一级公共组件，并将段塞作为param添加到路由器中。

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