Angular命名的路由器出口没有路由到?

Question

这个演示有两个出口(在app.module.ts中定义:

)

<router-outlet></router-outlet>
<router-outlet name="b"></router-outlet>

这些路线:

const routes: Routes = [
  { path: 'a', component: HelloComponent },
  { path: 'b', outlet: 'b', component: HelloComponent },
];

和这些按钮来测试路由(在app.component.html中)。

<button routerLink="a">router link a</button>
<button routerLink="b">router link b</button>

路由a有效。但是，当单击路由b时，会产生以下错误:

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

想法吗?

Answer 1

routerLink默认情况下总是使用主出口，您必须指定出口才能导航到它。在你的例子中:

<a [routerLink]="[{ outlets: { 'b': ['b'] } }]">Component Aux</a>

这个错误是有意义的，因为没有为主出口定义名为b的路由。