具有动态ID的默认路由

时间:2019-11-13 03:02:35

标签: angular

基本上,我有一个标签,每个标签页都是一个孩子:

这里是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 } ] } 。在上述路线中,我应该在问号中加上什么?

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

2 个答案:

答案 0 :(得分:0)

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

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

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

答案 1 :(得分:0)

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
            }
        ]
    }