Как я могу создавать динамические URL-адреса, используя их с помощью routerLink в Angular 8?

#angular8

#angular8

Вопрос:

Я пытаюсь динамически создавать ссылки со списком URL-адресов:

 <span *ngIf="item.type=='link'">
          <a  class="nav-link" [routerLink]="item.routerLink" skipLocationChange>{{item.label}}</a>
        </span>
 

это решение работает нормально, когда я запускаю dev на своем локальном хостинге, но при попытке создать свою библиотеку я получаю следующую ошибку:

 RROR: Can't bind to 'routerLink' since it isn't a known property of 'a'. ("<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <a class="navbar-brand" [ERROR ->][routerLink]="navBar.routerLink" skipLocationChange><img src="{{navBar.imagePath}}" height="40px" wid")
Can't bind to 'routerLink' since it isn't a known property of 'a'. ("item':'nav-item dropdown'">
        <span *ngIf="item.type=='link'">
          <a  class="nav-link" [ERROR ->][routerLink]="item.routerLink" skipLocationChange>{{item.label}}</a>
        </span>
 

это список моих зависимостей:

 "@angular/animations": "~8.2.9",
    "@angular/common": "~8.2.9",
    "@angular/compiler": "~8.2.9",
    "@angular/core": "~8.2.9",
    "@angular/forms": "~8.2.9",
    "@angular/platform-browser": "~8.2.9",
    "@angular/platform-browser-dynamic": "~8.2.9",
    "@angular/router": "~8.2.9",
 

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

1. item.routerLink это значение вы получаете из какого-либо API? и есть ли вероятность иметь пустое значение?

Ответ №1:

Вы импортировали import {RouterModule} from '@angular/router'; ? RouterModule это должно сработать. Или другой способ создания динамических маршрутов — вы можете вызывать функцию, а внутри вашего component.ts файла вы можете управлять ею. Пример

 import { Router } from '@angular/router';

export class ExampleComponent {

    constructor(private router: Router,) {}

    routerLinkTo() {
        this.router.navigate(["/foo"]);
    }
}
 

Пожалуйста, проверьте этот пример здесь

Для получения дополнительной информации о функциях маршрутизатора, пожалуйста, ознакомьтесь с документацией Angular здесь