当任一子链路路由处于活动状态angular2时,如何将元素设置为活动状态

时间:2016-12-19 04:43:06

标签: angular angular2-routing

我有以下代码片段,用于生成带有嵌入式下拉列表的bootstrap npm run build


0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'run', 'build' ]
2 info using npm@3.3.12
3 info using node@v5.1.1
4 verbose config Skipping project config: /Users/falks/.npmrc. (matches userconfig)
5 verbose stack Error: ENOENT: no such file or directory, open '/Users/falks/package.json'
5 verbose stack     at Error (native)
6 verbose cwd /Users/falks
7 error Darwin 15.6.0
8 error argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "build"
9 error node v5.1.1
10 error npm  v3.3.12
11 error path /Users/falks/package.json
12 error code ENOENT
13 error errno -2
14 error syscall open
15 error enoent ENOENT: no such file or directory, open '/Users/falks/package.json'
15 error enoent This is most likely not a problem with npm itself
15 error enoent and is related to npm not being able to find a file.
16 verbose exit [ -2, true ]

这适用于普通选项卡,但我无法弄清楚当任一嵌入式链接处于活动状态时如何使下拉列表处于活动状态。我试过了:

nav-taps

但它似乎没有解决任何问题,任何人都知道如何做到这一点?

1 个答案:

答案 0 :(得分:11)

我愚蠢并尝试将[routerLinkActive]放在<a>元素而不是<li>上。一旦我把它放在最顶端li,它就像一个魅力!

<ul class="nav nav-tabs">
  <li class="pull-right" [routerLinkActive]="['active']">
    <a class="dropdown-toggle" data-toggle="dropdown"> More <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a [routerLink]="['/profile/settings']">Settings</a></li>
        <li><a [routerLink]="['/profile/billing']">Billing</a></li>
      </ul>
  </li>
  <li class="pull-right" [routerLinkActive]="['active']"><a [routerLink]="['/profile/feature1']">Feature1</a></li>
  <li class="pull-right" [routerLinkActive]="['active']"><a [routerLink]="['/profile/feature2']">Feature2</a></li>
</ul>