如何从组件添加[routerLink]？

Question

我的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一样重定向？

Answer 1

你尝试过这样的事吗......

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

并确保您导入路由器即

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

Answer 2

要将routerLink添加到组件中，我们可以通过两种方式实现：

一种方法是使用

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

另一种方法是使用

this.router.navigateByUrl(url); 

作为参考，我在stackblitz中创建了一个例子，它通过两种方式解决了上述问题。

例：

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

---

Answer 3

您可以使用router.navigate()进行导航：

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

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