Блог

Главная - Вопросы по программированию - routerLink с сегментом url не работает в angular 8

routerLink с сегментом url не работает в angular 8

#angular

#angular

Вопрос:

Вот мой код:

 <span *ngIf="markup.baseline">   
   <mat-icon [routerLink]="['/default-markup', markup.id]">edit</mat-icon>
 </span>
 <span *ngIf="markup.baseline == 0">   
   <mat-icon [routerLink]="[markup.id]">edit</mat-icon>
 </span>

Первая ссылка, где URL-адрес должен быть «default-markup / 14», не работает.
Он работает правильно для второго условия.

Ошибка

 core.js:6014 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'default-markup/14

Вот код в модуле маршрутизации:

       {path: ':client', component: MarkupsListComponent, },
      {path: ':client/default-markup', component: MarkupsBaselineComponent,},
      {path: ':client/default-markup/:rule_id', component: MarkupsBaselineComponent,},
      {path: ':client/:rule_id', component: MarkupsDetailComponent,},

Комментарии:

1. что появляется в URL-адресе, когда вы нажимаете [routerLink]="[markup.id]" на ссылку?

2. Мой текущий URL-адрес страницы — markups / brookshuff. Когда я нажимаю на [markup.id ], это относится к markups/brookshuff /12. Я хочу, чтобы для другого условия он должен перейти в markups/brookshuff/default-markup /14

3. Просто попробуйте удалить / раньше default-markup . Попробуйте [routerLink]="['default-markup', markup.id]"

4. Добавлен ответ. Пожалуйста, проверьте, спасибо 🙂

Ответ №1:

Вы должны удалить / перед /default-markup . Когда вы указываете / в URL-адресе, он рассматривает его из корневого маршрута, в противном случае он будет относительно текущего маршрута.

Используйте ниже

 [routerLink]="['default-markup', markup.id]"

Ответ №2:

вы должны передать идентификатор клиента для каждого маршрута, изменив его следующим образом,

 <span *ngIf="markup.baseline">   
  <mat-icon [routerLink]="['/', clientId,'default-markup',markup.id]>edit</mat-icon>
</span>
<span *ngIf="markup.baseline == 0">   
  <mat-icon [routerLink]="[clientId]">edit</mat-icon>
</span>

пример stackblitz

Метки: