Angular 在角模式下使用navigatebyUrl导航时在路由器出口中呈现两个组件 我的要求和设置

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

这里的问题是，表2和表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>

当我点击GetInfo链接时，它应该导航到选项卡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}

运行ID
{{row.runId}}
getByRunId（runId:any）{
此.zone.run（（）=>{
this.router.navigate（['/getQualifiedBalanceByJobId']{
状态：{data:{runId:runId}}，
});
});
}
表1
表2
{path:'getQualifiedBalanceByJobId'，组件：DashboardPageComponent}
你能显示你的路由器配置和获取信息的HTML吗？@Random这是我的htl和路由器配置{{row.runId}@Random方法，点击路由器链接=====================================================getByruid（runId:any）{//this.openbalancemovementByruid（runId）；this.zone.run（（）=>{this.router.navigate（['/getQualifiedBalanceByJobId']，{state:{data:{runId:runId}}，}；}）；}@Random{path:'getQualifiedBalanceByJobId'，component:DashboardPageComponent}请将其添加到您的问题中，而不是在注释中，以便您可以格式化它^^