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

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

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

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

Answer 3

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

一种方法是使用

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

另一种方法是

this.router.navigateByUrl(url);

作为参考，我在 stackblitz 中创建了一个示例，该示例通过使用两种方法解决了上述问题。

示例：

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

Answer 4

为了更正确地工作，您应该将组件包装为<a></a>的锚标记，自动生成href，浏览器可以从上下文菜单的新选项卡中打开链接，或者在示例内部组件中将内容包装为'anchor '标签代替点击控制；

如何从组件添加[routerLink]？

4 个答案: