Question

我有各种物品（不同成分）的“饲料”。每个路由器都有一个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);
    }
  });
}

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

2 个答案: