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示例：Routing to a named outlet from links in a navigation component fails only when using [routerLink]

Answer 2

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

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

使用[routerLink]时出现角度“错误：无法匹配任何路由。URL段”，但可与this.router.navigate一起使用

2 个答案: