时间戳

首页 > 解决方案 > 在使用 Angular 中的 navigatebyUrl 导航时在路由器插座中渲染两个组件

angular - 在使用 Angular 中的 navigatebyUrl 导航时在路由器插座中渲染两个组件

问题描述

我的要求和设置

我有mat-tab，其中有两个选项卡-> Tab 1，Tab 2。Tab 2 具有搜索操作。所以我有一个垫子表，其中一列有一个链接。单击该链接后，它应该导航到 tab1 并显示相应的信息。

这里的问题是 Tab 2 和 Tab 1 都显示出来了。

<app-dashboard-page></app-dashboard-page>
  <router-outlet></router-outlet>

<mat-tab-group mat-align-tabs="start">
   <mat-tab label="First">Tab 1</mat-tab>
   <mat-tab label="Second">Tab 2</mat-tab>
</mat-tab-group>

在选项卡 2 中，我有类似下面的内容。 在此处输入图像描述

当我单击 GetInfo 链接时，它应该导航到 Tab 1 并显示记录。但是这两个组件都加载在同一页面上。

    <mat-header-cell *matHeaderCellDef> Run ID </mat-header-cell>
              <mat-cell *matCellDef="let row">
                <a [routerLink]="[]" (click)="getByRunId(row.runId)">
                  {{ row.runId }}
                </a>
              </mat-cell>

    getByRunId(runId: any) {
this.zone.run(() => {
this.router.navigate(['/getQualifiedBalanceByJobId'], {
state: { data: { runId: runId } },
});
});
}
     <mat-tab-group mat-align-tabs="start">
   <mat-tab label="First">Tab 1</mat-tab>
   <mat-tab label="Second">Tab 2</mat-tab>
  </mat-tab-group>

{path: 'getQualifiedBalanceByJobId', component: DashboardPageComponent}

标签： angularroutes

解决方案

推荐阅读