Question

基本上，我有一个标签，每个标签页都是一个孩子：

这里是import pandas as pd df = pd.read_excel('reformed_data.xlsx') df['Activity'].mask((df['Activity'].shift()==df['Activity']), inplace=True)：

TabIndexComponent.html

从服务器返回的<tab> <tab-page *ngFor="let t of tabs"> <a routerLink="{{t.id}}">{{t.name}}</a> </tab-page> </tab> <router-outlet></router-outlet>带有一个tabs字段和一个id字段。 name字段将用于获取每个标签页的更多信息，这些标签页将显示在id中。

这是路线的摘录：

router-outlet

我的问题是如何将选项卡默认为第一个选项卡页面，因为在编译时我不知道第一个选项卡页面的{ path: 'tab', component: TabIndexComponent, children: [ { path: '', redirectTo: '???', pathMatch: 'full' }, { path: ':id', component: TabComponent } ] }。在上述路线中，我应该在问号中加上什么？

还是在运行时进行一些动态路由？

Answer 1

Resolve类正是为这种情况而构建的，在这种情况下，您需要在渲染组件/激活路线之前加载数据。

整个示例中的更多内容：https://angular.io/guide/router#resolve-pre-fetching-component-data

在您的情况下，我将为tabs id编写解析程序服务，然后在路由元数据中引用此服务。在TabComponent内部，使用ActivatedRoute接口从路由订阅数据。

Answer 2

export class DynamicIdGuard implements CanActivate {
  constructor(private router: Router, private dynamicIds: DnamicIdsService) {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<any> {

    if(route.children.length > 0) {
        return of(true);
    } else {
        return this.dynamicIds.get()
        .pipe(
          map(ids => {
            this.router.navigate([`/${ids[0]}`]);
            return of(false);
          })
        )
    }
  }
}

不太优雅，但是现在就可以了。

    {
        path: 'tab',
        component: TabIndexComponent,
        canActivate: [DynamicIdGuard],
        runGuardsAndResolvers: 'always',
        children: [
            {
                path: ':id',
                component: TabComponent
            }
        ]
    }

具有动态ID的默认路由

2 个答案: