Блог

Мой html-вызов этого компонента

    <navbar [title]="'Recorridos'"
            [hasNavbarItems]="true"
            [itemsJsonFileName]="'recorrido-list-navbar-items.json'"
            (btnActionClicked)="onBtnActionClicked($event)"
            (btnFilterClicked)="onBtnFilterClicked($event)">
    </navbar>
 

это динамический компонент, который затем в onBtnActionClicked($event) необходимо перенаправить следующим образом

 <a [routerLink]="['/parent/detail', detail.detailId]">{{detail.detailId}}</a>
 

но, как вы видите, это не может быть добавлено из html в моем компоненте
Я мог бы назвать нажатие кнопки
выполнением

 onBtnActionClickedV(event) {

        }
 

в этой функции, как я могу перенаправить, как это делает routerLink??

Вы пробовали что-то подобное….

 onBtnActionClickedV(event) {
   this.router.navigate(['/parent/detail']);
    }
 

и убедитесь, что вы импортируете маршрутизатор, т.е.

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

Чтобы добавить routerLink в компонент, мы можем добиться этого двумя способами:-

Один из способов заключается в использовании

 this.router.navigate([url]); // Bind the url in Array
 

Другой метод заключается в использовании

 this.router.navigateByUrl(url); 
 

Для вашей справки я создал пример в stackblitz, который решает вышеуказанные проблемы, используя два способа.

Пример:

https://stackblitz.com/edit/angular-routerlinks-from-component

Вы можете перемещаться с помощью router.navigate() :

 <navbar (btnActionClicked)="onBtnActionClicked('/parent/detail/123')">

onBtnActionClickedV(url) {
  this.router.navigate(url);
}
 

для более корректной работы вам следует обернуть компонент в тег привязки, поскольку <a></a> , чтобы автоматизировать генерацию href, браузер может открывать ссылку в новой вкладке из контекстного меню, или в вашем примере внутреннее содержимое компонента переносится в тег привязки вместо управления щелчком мыши;