Зачем mat-tab-nav-bar нужно 2 клика для загрузки содержимого маршрутизатора? - PullRequest
Новая
       10

Зачем mat-tab-nav-bar нужно 2 клика для загрузки содержимого маршрутизатора?

0 голосов
/ 17 февраля 2019

Я использую mat-tab-nav-bar для реализации угловой функции mat-tab со ссылками на маршрутизаторы.

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 по умолчанию, я могу получить содержимое сразу же, когда перейду кcomponent. 

<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>

Это исправляет проблему, но, с другой стороны, я не могу использовать routerlink для этой опции.

Компонент, где функция 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...

...