2

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

<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)

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

4

2 回答 2

2

这个更具体的问题用一个显示问题的 StackBlitz 示例回答： Routing to a named outlet from links in a navigation component failed only when using [routerLink]

于 2019-09-26T18:12:59.480 回答
1

在出口前添加空字符串，如下所示

[routerLink]="['', { outlets: { center: ['gi', '10'] } }]"
于 2019-09-26T20:31:19.387 回答