1

我正在使用来实现带有路由器链接mat-tab-nav-bar的 angular 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标签时，我可以在导航到组件时立即获取内容。

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

4

0 回答 0