Angular 命名路由器出口链接不起作用

Question

在 Angular 上创建指向命名路由器插座的链接时遇到了一些问题。

这里是代码中最重要的部分：

app-routing-module.ts：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import {FirstComponent} from './first/first.component';
import {SecondComponent} from './second/second.component';
import {PageNotFoundComponent} from './page-not-found/page-not-found.component';
import {DefaultSideBarComponent} from './default-side-bar/default-side-bar.component';
import {AlternativeSideBarComponent} from './alternative-side-bar/alternative-side-bar.component';

const routes: Routes = [
  { path: 'first', component: FirstComponent},
  { path: 'second', component: SecondComponent},
  { path: '', redirectTo: '/first', pathMatch: 'full'},
  { path: '**', component: PageNotFoundComponent},
  { path: 'alternative-side-bar', component: AlternativeSideBarComponent, outlet: 'sidebar'},
  { path: '', component: DefaultSideBarComponent, outlet: 'sidebar'}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

app.component.html：

<div class="container">
  <nav>
    <ul>
      <li><a routerLink="first" routerLinkActive="active">first</a></li>
      <li><a routerLink="second" routerLinkActive="active">second</a></li>
    </ul>
  </nav>
  <div class="side-bar">
    <router-outlet name="sidebar"></router-outlet>
  </div>
  <main>
    <router-outlet></router-outlet>
  </main>
</div>

这里有一个打印屏幕只是为了让事情更清楚：

我面临的问题是 sidbears 组件内部的链接。

default-side-bar.component.html

<a [routerLink]="[{outlets:{sidebar: ['alternative-side-bar']}}]" >Change Bar</a>
<p>default-side-bar works!</p>

此链接工作正常。

alternative-side-bar.component.html

<a [routerLink]="['',{outlets:{sidebar: ['']}}]" >Change Bar</a>
<p>alternative-side-bar works!</p>

现在这是我遇到问题时的链接。它正在解决这个问题：

http://localhost:4200/first(sidebar:)

很明显，它不起作用。它生成以下错误：

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: ''
Error: Cannot match any routes. URL Segment: ''

是否可以使用默认根路径 '' 到命名插座并有一些指向它的工作链接？

StackBlitz if you want to try it out

注意：

如果我使用这个：

<a [routerLink]="[{outlets:{sidebar: ['']}}]" >Change Bar</a>

嵌套笨拙的出口链接的结果甚至更糟：

http://localhost:4200/first(sidebar:alternative-side-bar/(sidebar:))

Answer 1

更改[routerLink]，如下所示。

alternative-side-bar.component.html

<a [routerLink]="['',{outlets:{sidebar: []}}]">Change Bar</a>
<p>alternative-side-bar works!</p>