Question

我遇到一个问题，当第一次访问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>

当我尝试直接访问任何选项卡时，这似乎只是一个问题。否则，在单击时似乎工作正常。有什么想法吗？

角材料选项卡初始活动选项卡

0 个答案: