Angular 2，将活动类添加到路由器链接[最佳实践]答案

【问题标题】：Angular 2, adding active class to router link [Best practice]Angular 2，将活动类添加到路由器链接[最佳实践]
【发布时间】：2017-03-06 07:34:33
【问题描述】：

我正在使用InputrouterLinkActive 将活动类添加到某些特定的网址。但我希望该特定链接在检测到一大块单词时始终处于活动状态。让我解释一下：如果我定义的路线是/rent/page/:id，并进入我的模板，我会这样做：

 <a [routerLinkActive]="['active']" [routerLink]="['/rent/page/1']" title="">rent</a>

如果地址栏中的 url 与定义的路由匹配，它就可以工作，它会添加 active 类。我的包含租用链接的主导航将处于活动状态。

但我想要更多，如果我的路由有这个定义/rent/:property/:name/:id，然后我点击网址，它不会将活动链接添加到我的主导航中。

我找到了以下解决方案：

   // ...
   this._router.events.subscribe(
        (urlObj) => {
            if(urlObj.url.match(/^(\/rent).*$/)) {
                this.active["rent"] = true;
            }
        }
    )
    // ...

每次我将rent 匹配到当前网址时，我都会将属性rent 设置为对象active，它会在我的租金导航中添加活动。和之前提到的模板，我修改如下：

<a [class.active]="active['rent']" [routerLink]="['/rent/page/1']" title="">rent</a>

它有效，但我不确定这是否是一个好习惯。

我的问题是：如果我想保持特定链接处于活动状态，即使用户更改了页面，如何routerLinkActive？有没有使用[routerLinkActive] 的替代方法？

【问题讨论】：

标签： angular routerlinkactive

【解决方案1】：

这可以通过 router-link 来完成：

<router-link :to="{name :'root'}">Root</router-link>
<router-link :to="{name :'foo'}">Go to Foo</router-link>
<router-link to="to="/bar">Go to Bar</router-link>

/bar">去酒吧

检查以下小提琴： http://jsfiddle.net/xgrjzsup/3276/

【讨论】：