Angular 角度2动态模板

我有一个动态路线导航栏，我还想使用1个模板。因此，如果我请求，我就是从数组中获取数据

我怎样才能做到这一点

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 -->

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"}
];

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

export const routing = RouterModule.forRoot(APP_ROUTES);

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() { }
}

app.routing.ts：

<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 -->

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"}
];

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

export const routing = RouterModule.forRoot(APP_ROUTES);

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() { }
}

项目服务：

<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 -->

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"}
];

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

export const routing = RouterModule.forRoot(APP_ROUTES);

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() { }
}

---

无法在根组件中设置参数，因为根组件不是角度组件。见此评论

这不起作用的原因是您的index.html 你的位置不是一个角度 组成部分。因此，Angular不会编译此元素。及 Angular在运行时不读取属性值，仅在 编译时，否则我们会受到性能的影响

因此，您需要一个一级公共组件，并将slug作为参数添加到路由器中

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

---

有什么问题吗？错误？@Pardeep Jain，我想添加一个模板，如果我点击AAA，我想显示属于AAA的数据，因此使用数组。我明白，但我想要的是当请求是dom.com/AAA或dom.com/bbb时，它将数据显示到1个组件，而不是AAA组件和bbb组件，所以是动态组件？！还有一个项目详细信息。是的，似乎是这样，但我如何才能实现domain.com/：slug？！你不能那样做。您只有第二个级别的参数，如domain.com/component/：slug。allI的相同组件在angular是新组件，因此我必须为每个“slug”AAA、BBB CCC创建一个组件，如AaaComponent等，但显示的内容结构是相同的（id、名称和描述），需要一个模板和一个组件。不，您只需要创建一个组件，它接收一个参数：slug，