Angular 命名路由器插座 link 不工作

Question

我在 link 到命名路由器出口在 Angular 上工作时遇到一些问题。

下面是代码中最重要的部分：

应用程序路由-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 组件中的 links。

默认端-bar.component.html

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

这个 link 工作正常。

替代方-bar.component.html

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

现在这是 link 我遇到问题的地方。它正在解决这个问题：

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

显然，它不起作用。它会生成以下错误：

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

是否可以使用默认的根路径 '' 到指定的出口并有一些工作 link 指向它？

StackBlitz if you want to try it out

注：

如果我使用这个：

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

嵌套笨拙的插座结果更差 link:

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

Answer 1

如下所示更改 [routerLink]。

替代方-bar.component.html

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

Angular 命名路由器插座 link 不工作

Angular named router outlet link not working

routes

typescript

angular