У меня проблема с тем, что при первом переходе к 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>
Это просто кажется проблемой, когда я пытаюсь получить доступ к любой из вкладок напрямую.В противном случае, кажется, работает нормально при нажатии вокруг.Есть идеи?