2

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

 <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，它会在我的租金导航中添加活动。而之前提到的模板，我将其更改如下：

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

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

我的问题是：如果我想routerLinkActive保持特定链接处于活动状态，即使用户更改了页面，该怎么办？有没有另一种方法可以做到这一点[routerLinkActive]？

4

1 回答 1

0

这可以通过 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/

于 2017-12-21T12:19:13.140 回答