Зачем 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...

0 ответов

Другие вопросы по тегам