【问题标题】:Access current route name from a controller or component从控制器或组件访问当前路由名称
【发布时间】:2015-05-12 23:04:32
【问题描述】:

我需要根据当前路由名称将“活动”类应用到引导选项卡。路由对象包含“routeName”,但我如何从控制器或组件访问它?

【问题讨论】:

  • 这个 this.controllerFor('application').get('currentRouteName')
  • @blessenm 是的,这正是我想要的
  • ember 会为你做这件事。只需在您的标签上使用链接到
  • Ember.getOwner(this).lookup(‘controller:application’).currentPath; 参考:discuss.emberjs.com/t/ember-get-current-route-name/10324

标签: ember.js


【解决方案1】:

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

【讨论】:

  • @Huafu 它应该在 Ember 1 中工作。我不确定 ember 2。我已经有一段时间没有在 ember 中工作了。但我认为它不会因为控制器在 ember 2 中被替换为支持可路由组件。我什至不确定他们是否已经朝那个方向移动。但是,如果您找到替代方案,如果您可以在此处更新,那就太好了。
  • 不,我的意思是,controllerForEmber.Route 的公共方法,在 Ember 2 中它也是 Ember 的私有静态方法,但我不认为它是一个方法Ember.Component,甚至是私人的。换句话说,这将适用于路由,但不适用于组件,因为 controllerFor 无法在此处访问。
  • @Huafu 感谢您的清理。这是有道理的,因为理想情况下组件应该只能访问从控制器或依赖注入传入的东西。
  • 这在 Ember 2 中不起作用。至少不是来自 controllerthis.controllerFor 不再定义。我认为你可以做到,但你需要使用 registrycontainer 或类似的东西。
  • @PerLundberg 您可能需要在您需要使用它的地方注入应用程序控制器。 emberjs.jsbin.com/vuyuha/2/edit?html,js,output
【解决方案2】:

其实你不需要自己申请active class。 link-to 助手会为您完成。

here:

{{link-to}} 将在应用程序的当前路由与提供的 routeName 匹配时应用 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>

【讨论】:

    【解决方案3】:

    在绝对绝望的情况下,您可以通过组件内的this.container.lookup("router:main")this.container.lookup("controller:application") 查找路由器或应用程序控制器(公开“currentRouteName”属性)。

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

    可能还会有更好的答案 - 但 container.lookup() 应该会关闭您当前的阻止程序。

    【讨论】:

    • 它为我返回未定义:this.container.lookup("router:main").get('currentRouteName')
    【解决方案4】:

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

    router: service(),
    myRouteName: computed('router.currentRouteName', function () {
        return this.get('router.currentRouteName') + 'some modification';
    }
    

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

    这对我来说非常有效,因为我想根据当前路线计算出一些东西。该服务公开 currentRouteNamecurrentURLlocationrootURL

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

    【讨论】:

    • 作品,Ember 3.8
    【解决方案5】:

    对于 Ember 2,您可以从控制器尝试:

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

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

    【讨论】:

      【解决方案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
        }

      `

      【讨论】:

        【解决方案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 属性设置。如果需要,这需要手动清理,但根据您的实施和用例,这可能是可以接受的。

        【讨论】:

        • 您不想在didTransition() 中处理这个问题吗?
        • @ctcpip 可能,虽然不是 100% 确定,但取决于您可以接受的内容。我这样做是为了允许在转换之前检查目标路由,因为如果我的应用程序的流程/逻辑不允许目标路由,我不想触发转换。
        猜你喜欢
        • 1970-01-01
        • 2013-08-15
        • 2013-01-25
        • 1970-01-01
        • 2013-02-25
        • 2017-06-10
        • 2016-05-09
        • 2014-03-02
        • 1970-01-01
        相关资源
        最近更新 更多