网站搜索

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>

似乎只有当我尝试直接访问任何标签时才会出现问题。否则,在点击浏览时似乎工作正常。有什么建议吗?