Question

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

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

如果地址栏中的网址与定义的路线匹配，则会有效，并且会添加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]？

执行此操作

Answer 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“＆gt;转到栏

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

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

1 个答案: