Angular <router-outlet> 两次显示父级答案

【问题标题】：Angular <router-outet> is displaying the parent twiceAngular <router-outlet> 两次显示父级
【发布时间】：2021-09-27 16:38:44
【问题描述】：

我有一个父组件（RemoteMpnitoringOverviewComponent）和一个子组件（FilterIncidentsComponent），它是一个模态，但我不知道为什么父组件显示两次。我尝试了Angular `<router-outlet>` displays template twice 的解决方案，但没有任何结果。

const routes: Routes = [
  {
    path: '',
    canActivate: [MsalGuard],
    canActivateChild: [MsalGuard],
    component: RemoteMonitoringOverviewComponent,
    children: [
      {
        path: '', component: RemoteMonitoringOverviewComponent, children: [
          { path: 'filter', component: FilterIncidentsComponent },
        ]
      }
    ]
  },
  { path: '**', redirectTo: '' },
];

【问题讨论】：

我们需要更多信息，也许您应该在您的 app.component.html 和 remotemonitoringoverview.component.html 中添加代码，以便我们可以看到正在显示的内容

标签： angular typescript redirect routes

【解决方案1】：

在第一个嵌套级别中，您应该只使用“redirectTo”而不是两次分配组件。像这样：

const routes: Routes = [
  {
    path: '',
    canActivate: [MsalGuard],
    canActivateChild: [MsalGuard],
    component: RemoteMonitoringOverviewComponent,
    children: [
      {
        path: '', redirectTo: 'filter', pathMatch: 'full', children: [
          { path: 'filter', component: FilterIncidentsComponent },
        ]
      }
    ]
  },
  { path: '**', redirectTo: '' },
];

【讨论】：