Ember js 活动 class 不适用于嵌套或 sub-routes

Question

我有一个 link 路线说 about 和几个子路线 about.college 和 about.campus.

现在我在 header 顶部导航栏和侧边栏中有 about url 和子菜单。

当我 select 侧栏中的任何菜单时，主导航栏中 about 的活动 class 被删除。

我想在 about.campus 或 about.college 路线上激活 about link。

如有任何帮助，我们将不胜感激。

Header 导航栏中的代码

<div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li>
          {{#link-to "about.college"}}
            {{loc "About"}}
          {{/link-to}}
        </li>
    </ul>
</div>

Sidbar 中的代码

<div class="content-area leftPanel_stats">
  <ul>
     <li>{{#link-to 'about.college'}}{{loc 'About College'}}{{/link-to}}</li>
     <li>{{#link-to 'about.campus'}}{{loc 'About Campus'}}{{/link-to}}</li>
  <ul>
</div>

现在当我在 about.campus URL 时，我希望 header 顶部按钮处于活动状态

Answer 1

您的问题是 header link 中的关于 "about.college"。

如果它 link 只是 "about" 路线，它将保持活动状态因为 link-to 助手根据它路由到的目标添加活动 class。

所以你可以做的是制作 about.index 路线（如果你没有），然后让它重定向到 "about.colege" 在即模型钩子中。然后你可以让你的导航栏中的 link 是： {{#link-to "about"}} {{loc "About"}} {{/link-to}}

Answer 2

我使用 current-when 属性使 link 处于活动状态。

<div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li>
          {{#link-to "about.college" current-when="about"}}
            {{loc "About"}}
          {{/link-to}}
        </li>
    </ul>
</div>

Ember js 活动 class 不适用于嵌套或 sub-routes

Ember js active class not working for nested or sub-routes

javascript

ember.js

ember-cli