使用 [routerLink] 时 Angular "Error: Cannot match any routes. URL Segment"，但它适用于 this.router.navigate

Question

>我的应用程序中有一个主出口和一个命名出口，定义如下：

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

我已经在我的应用程序路由中定义了与此中心组件一起使用的路由：

const routes: Routes = [
{ path: 'login', component: LoginComponent, outlet: 'center' },   
{ path: 'home',  component: HomeComponent },
{ path: 'car',       component: BaseComponent },
{ path: 'car/:id',   component: CarComponent },
{ path: 'gi/:otherId',component:GIComponent, outlet: 'center' },
{ path: '', pathMatch: 'full', redirectTo: 'home' }];

我正在Car.component中定义一个链接.html将GI组件路由到命名的出口。 但是这个链接给了我一个错误：

<a [routerLink]="[{ outlets: { center: ['gi', myObject.id] } }]" > GI Link </a>

但是，我能够创建一个函数来使用 router.navigate(( 执行此导航：

<a [routerLink]="" (click)="routeGI()" > Gi Link  </a>

。以及我的 Car.Component.ts 文件中的相关函数：

routeGI() { this.router.navigate([{ outlets: {center: ['gi', this.myObject.id]  }}]);

所以函数routeGI((就像一个魅力，但是使用[routerLink]从html导航给了我以下异常：

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 
'car/2112'
Error: Cannot match any routes. URL Segment: 'car/2112'
at ApplyRedirects.push../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError 
(router.js:2464)
at CatchSubscriber.selector (router.js:2445)
at CatchSubscriber.push../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchSubscriber.error (catchError.js:34)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:79)

这些指向我命名的插座的链接不应该都有效吗？

Answer 1

通过一个显示问题的 StackBlitz 示例回答了这个更具体的问题：仅当使用 [routerLink] 时，从导航组件中的链接路由到命名插座才会失败

Answer 2

像波纹管一样在出口前添加空字符串

[routerLink]="['', { outlets: { center: ['gi', '10'] } }]"