Question

I needs to apply an "active" class to a bootstrap tab depending on the current route name. The route object contains "routeName" but how to I access this from a controller or component?

Answer 1

使用此this.controllerFor('application').get('currentRouteName');

Answer 2

事实上，您不需要自己申请活跃课程。 link-to帮助将为您完成。

请参阅here：

当应用程序的当前路由与提供的routeName匹配时，
{{link-to}}将应用CSS类名“active”。例如，如果应用程序的当前路由是“photoGallery.recent”，则使用{{link-to}}：

{{#link-to 'photoGallery.recent'}}
  Great Hamster Photos
{{/link-to}}

将导致

<a href="/hamster-photos/this-week" class="active">
  Great Hamster Photos
</a>

Answer 3

在极度绝望的情况下，您可以从组件中通过this.container.lookup("router:main")或this.container.lookup("controller:application")查找路由器或应用程序控制器（公开“currentRouteName＆＃39;”属性）

如果这对我来说是一个普遍的趋势，我会创建一个CurrentRouteService并将其注入我的组件中，以便我可以在测试中更轻松地模拟事物。

可能还有更好的答案 - 但是container.lookup（）应该击倒你当前的拦截器。

Answer 4

对于Ember 2，您可以尝试从控制器：

appController: Ember.inject.controller('application'),
currentRouteName: Ember.computed.reads('appController.currentRouteName')

然后你可以将它传递给组件。

Answer 5

从Ember 2.15开始，您可以通过公共路由器服务执行此操作。

fileLocation

https://www.emberjs.com/api/ember/release/classes/RouterService

这对我来说真的很好，因为我希望从当前路线中计算出一些东西。该服务显示 currentRouteName ， currentURL ，位置和 rootURL 。

currentURL 具有查询参数，但是您需要从URL解析它们。

Answer 6

试试这个。

export default Ember.Route.extend({
  routeName: null,
  
  beforeModel(transition){
    //alert(JSON.stringify(transition.targetName) + 'typeof' + typeof transition.targetName);
    this.set('routeName', transition.targetName);
  },
  model(){

   // write your logic here to determine which one to set 'active' or pass the routeName to controller or component
  }

`

Answer 7

使用来自@ maharaja-santhir的答案的见解，可以考虑在目标控制器上设置routeName属性以供例如在目标模板中使用。这样就不需要在多个位置定义逻辑，从而无需代码重用。以下是如何实现这一目标的示例：

// app/routes/application.js
export default Ember.Route.extend({
    ...

    actions: {
        willTransition(transition) {
            let targetController = this.controllerFor(transition.targetName);
            set(targetController, 'currentRouteName', transition.targetName);
            return true;
        }
    }
});

在应用程序路由中定义此willTransition操作允许将当前路由名称传播到应用程序中的任何位置。请注意，即使在导航到另一个路径后，目标控制器仍将保留currentRouteName属性设置。如果需要，这需要手动清理，但根据您的实现和用例，它可能是可接受的。

Access current route name from a controller or component

7 个答案: