Зачем mat-tab-nav-bar нужно 2 клика для загрузки содержимого маршрутизатора?
Я использую mat-tab-nav-bar
реализовать функцию угловых мат-вкладок со ссылками на роутеры.
xxx.component.html:
<nav mat-tab-nav-bar>
<a *ngFor="let link of navLinks" mat-tab-link
#rla="routerLinkActive"
[active]="isViewInitialized && isLinkActive(rla)"
[routerLink]="link.path"
routerLinkActive>
{{link.label}}
</a>
</nav>
xxx.component.ts:
navLinks = [];
Проблема в том, что когда я загружаю компонент, где mat-tab-nav-bar
встроено, приложение не загружает весь контент первой вкладки. Он загружает только заголовок, который является статическим. Остальное, которое генерируется динамически (http-вызов базы данных), не отображается. Мне нужно еще раз нажать на вкладку, чтобы загрузить содержимое. другими словами, я должен нажать 2 раза. А иногда мне просто нужно щелкнуть еще раз где-нибудь в теле документа, чтобы загрузить содержимое.
Но когда я использую по умолчанию mat-tab
тег, я могу получить содержимое сразу, когда я перехожу к компоненту.
<mat-tab-group (selectedTabChange)="onLinkClick($event)">
<mat-tab label="org">
<router-outlet></router-outlet>
</mat-tab>
<mat-tab label="Create">
<router-outlet></router-outlet>
</mat-tab>
<mat-tab label="Update">
<router-outlet></router-outlet>
</mat-tab>
</mat-tab-group>
Это решает проблему, но, с другой стороны, я не могу использовать ссылку на маршрутизатор для этой опции.
Компонент, где mat-tab
Функция, если она реализована, относится к пользовательскому модулю с маршрутизатором, использующим дочерние элементы:
export const CustomModuleRoutes: Routes = [
{ path: '', redirectTo: 'org', pathMatch: 'full'},
{ path: '', component: CustomComponent, canActivate: [ AuthguardGuard ],
children: [
{ path: 'org', component: OrgComponent, data: { label: 'Overview' } },
{ path: '', redirectTo: 'org', pathMatch: 'full'},
{ path: 'create', component: CreateComponent, data: { label: 'CREATE' } },
{ path: 'delete', component: DeleteComponent, data: { label: 'DELETE' } },
]
},
];
Любой намек, как обойти эту проблему? Я не против, какой вариант решит проблему. mat-tab-nav-bar
или же <mat-tab-group><mat-tab...