Question

我在路由时遇到了麻烦。我有一个标准的顶级导航，可以正确路由（设置）。但我似乎无法在子导航中显示子路线以显示在子出口而不是主出口内。

我看到的错误是：

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

1 个答案: