基本上,我有一个标签,每个标签页都是一个孩子:
这里是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
}
]
}
。在上述路线中,我应该在问号中加上什么?
还是在运行时进行一些动态路由?
答案 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
}
]
}