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]來做到這一點？

來源

2016-10-24 Radonirina Maminiaina

這可以這樣做與路由器鏈接：

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

來源

2017-12-21 12:19:13

Angular 2，爲路由器鏈接添加活動類[最佳實踐]

回答

相關問題