Блог

У меня есть панель навигации с динамическим маршрутом, и я также хочу использовать 1 шаблон. Так что, если я сделаю запрос на http://domain/com/aaa я получаю данные из массива.

Как я могу этого добиться?

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

Вы не можете задать параметры в корневом компоненте, потому что корень не является компонентом angular. Смотрите этот комментарий https://github.com/angular/angular/issues/1858#issuecomment-151326461

Причина, по которой это не работает, заключается в том, что ваш index.html , в который вы помещаете, не является угловым компонентом. Из-за этого Angular не будет компилировать этот элемент. И Angular не считывает значения атрибутов во время выполнения, только во время компиляции, так как в противном случае мы получим снижение производительности.

Итак, вам нужен одноуровневый общий компонент, и добавьте slug в качестве параметра в маршрутизатор.

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