如何从组件添加[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