自动导航到* in中的第一个routerLink？

Question

我有一个包含各种项目(不同组件)的"feed“。每一个都有一个routerLink，它可以改变提要旁边的路由器插座中的视图。当提要初始化时，我希望将视图导航到提要中的第一个项目。

<div class="item-container">
  <ng-container
        *ngFor="let feedItem of items"
        [ngSwitch]="feedItem.type"
      >
        <component-1
          [routerLink]="['type1', feedItem.item.id]"
          [routerLinkActive]="'active'"
          ...
          *ngSwitchCase="FeedItemType.Type1"
        ></component-1>
        <component-2
          [routerLink]="['type2', feedItem.item.id]"
          [routerLinkActive]="'active'"
          ...
          *ngSwitchCase="FeedItemType.Type2"
        ></component-2>
  </ng-container>
</div>

Answer 1

这里有一个更好的方法。定义管线时，可以为父零部件指定默认管线。

const routes: Routes = [
    {
        path: 'parent',
        component: ParentComponent,
        children: [
            { path: '', redirectTo: 'type1', pathMatch: 'full' },   // <--- default child route
            { path: 'type1', component: Type1Component },
            { path: 'type2', component: Type2Component },
        ],
    },
];

因此，当您导航到/parent时，它会自动重定向到/parent/type1。

Answer 2

感谢@zyz，我用以下方法解决了这个问题：

@ViewChildren(RouterLink) feedItems: QueryList<RouterLink>;

...

ngAfterViewInit(): void {
  this.feedItems.changes.pipe(take(1)).subscribe(items => {
    if (items.first) {
      this.router.navigateByUrl(items.first.urlTree);
    }
  });
}