如何从组件中添加 [routerLink]？答案

【问题标题】：how to add [routerLink] from component?如何从组件中添加 [routerLink]？
【发布时间】：2016-10-14 21:16:06
【问题描述】：

我对这个组件的 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 那样重定向？？

【问题讨论】：

标签： angular angularjs-directive angular2-routing angular2-services

【解决方案1】：

你有没有尝试过这样的事情......

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

并确保您导入路由器，即

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

【讨论】：

【解决方案2】：

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

一种方法是使用

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

另一种方法是使用

this.router.navigateByUrl(url);

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

示例：

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

你需要传递一个数组来导航:(

【解决方案4】：

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

【讨论】：