Угловое сообщение «Ошибка: невозможно сопоставить никакие маршруты. Сегмент URL» при использовании [routerLink], но оно работает с 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 () работает как чудо, но навигация по html с использованием [routerLink] дает мне следующее исключение:

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

добавить пустую строку перед выпуском, как показано ниже

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

Answer 2

Ответ на этот более конкретный вопрос на примере StackBlitz, показывающем проблему: Маршрутизация на именованный выход из ссылок в компоненте навигации завершается неудачно только при использовании [routerLink]