Angular 2，为路由器链接添加活动类[最佳实践]

问题描述：

我使用Input routerLinkActive将活动类添加到某个特定的url。但我希望特定的链接总是处于活动状态，如果它检测到一个单词的大块。让我解释一下：如果我的定义路线/rent/page/:id，然后进入我的模板，我这样做：Angular 2，为路由器链接添加活动类[最佳实践]

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

它的工作原理，如果在地址栏中的URL匹配定义的路线，并将其添加active类。我的主要导航其中包含租用链接将被激活。

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

我发现了以下解决方案：

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

我每次匹配rent到当前的URL，我设置属性rent对象active并以我的租金导航添加了活动。而模板之前mentionned，我改变如下：

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

和它的作品，但我不知道，如果这是一个很好的做法与否。

我的问题是：如何routerLinkActive如果我想保持特定的链接活动，即使用户更改页面？有没有其他的方法来使用[routerLinkActive]来做到这一点？

答

这可以这样做与路由器链接：

<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/

Angular 2，为路由器链接添加活动类[最佳实践]

相关推荐