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

Question

我有各种物品（不同组件）的“饲料”。每个都有一个routerLink，它改变了feed旁边的router-outlet中的视图。我想在初始化Feed时将视图导航到Feed中的第一个项目。

<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);
    }
  });
}