typescript - Angular Material 选项卡初始激活页
我遇到了一个问题,当第一次访问一个 URL 时,Angular Material 标签页组件似乎没有突出显示活动标签页。在我点击其中一个标签页(除了我最初所在的标签页)之后,它才开始突出显示标签页。
例如,我在我的模块中有以下路由:
const routes = [
{ path: '', redirectTo: '/account/overview', pathMatch: 'full' },
{ path: '', component: AccountComponent, children: [
{ path: 'overview', component: AccountOverviewComponent },
{ path: 'profiles', component: AccountProfilesComponent },
{ path: 'notifications', component: AccountNotificationsComponent },
{ path: 'billing', component: AccountBillingComponent },
{ path: 'api', component: AccountApiComponent },
{ path: 'security', component: AccountSecurityComponent }
]
},
];
如您所见,这将把 /account 重定向到 /account/overview,这是我在 AccountComponent 中指定的选项卡之一:
this.navLinks = [
{ label: 'Overview', path: './overview', index: 0 },
{ label: 'Profiles', path: './profiles', index: 1 },
{ label: 'Notifications', path: './notifications', index: 2 },
{ label: 'Security', path: './security', index: 2 },
{ label: 'Billing', path: './billing', index: 4 },
{ label: 'API', path: './api', index: 5 },
];
并像这样呈现在页面上:
<a mat-tab-link
*ngFor="let link of navLinks"
[routerLink]="link.path"
routerLinkActive #rla="routerLinkActive"
[active]="rla.isActive">
{{ link.label }}
</a>
似乎只有当我尝试直接访问任何标签时才会出现问题。否则,在点击浏览时似乎工作正常。有什么建议吗?