Angular 10 条带命名出口的子路线

Question

我在路由方面遇到了问题。我有一个标准的顶部导航，可以正确路由（设置）。但是我似乎无法让我的侧导航中的子路由显示在子出口而不是主出口内。

我看到的错误是：

core.js:4197 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'settings/custom-song-properties'

  {
    path: 'settings', component: SettingsComponent, canActivate: [AuthGuard],
    children: [
      {
        path: 'custom-song-properties', component: CustomSongPropertiesComponent,
        canActivate: [AuthGuard],
        outlet:'settings-outlet'
      }
    ]
  }

<mat-sidenav-container class="settings-container">
  <mat-sidenav class="settings-side-nav" opened mode="side">
    <mat-list>
      <a [routerLink]="'account'" mat-list-item>Account</a>
      <a [routerLink]="'theme'" mat-list-item>Theme</a>
      <a [routerLink]="['custom-song-properties']" mat-list-item>Custom Song Properties</a>
    </mat-list>
  </mat-sidenav>
  <mat-sidenav-content class="settings-content">
    <router-outlet name="settings-outlet"></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

我在这里错过了什么？

Answer 1

您必须将 [routerLink]="['custom-song-properties']" 替换为 [routerLink]="[{ outlets:{ 'settings-outlet': 'custom-song-properties' } }]"，因为 custom-song-properties 的路由配置对象定义了一个命名出口，而不是 primary，它是默认。

Angular 10 条带命名出口的子路线

Angular 10 Child Routes with Named Outlet

angular-material

angular

angular-router