带有命名插座的 Angular 10 子路由答案

【问题标题】：Angular 10 Child Routes with Named Outlet带有命名插座的 Angular 10 子路由
【发布时间】：2020-08-24 23:45:25
【问题描述】：

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

我看到的错误是：

core.js:4197 ERROR 错误：未捕获（承诺中）：错误：无法匹配任何路线。 URL 段：'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>

我在这里错过了什么？

【问题讨论】：

如果将[routerLink]="['custom-song-properties']" 替换为[routerLink]="[{ outlets:{ 'setting-outlet': 'custom-song-properties' } }]" 会发生什么？
@AndreiGătej 相同：错误错误：未捕获（在承诺中）：错误：无法匹配任何路由。 URL 段：“设置”
现在一切正常吗？
不错！如果我添加我的建议作为答案可以吗？
@AndreiGătej 是的，当然。

标签： angular angular-material angular-router

【解决方案1】：

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

【讨论】：