Question

嘿，我在删除视图方面遇到了问题。

该视图用作导航栏

{{view "inner-form-navbar" navbarParams=innerNavObject}}

params看起来像这样

 innerNavObject: {
        ...
        routeToReturn: 'someroute.index',
        ...
 },

在导航栏上点击父索引路径时会有一个小的“后退”按钮。

目前的工作原理如下：

this.get('controller').transitionToRoute(routeToReturn);

但这不适用于组件，无论如何都是粗略的。我需要以某种方式将路由器注入组件吗？或者有人为此获得了解决方案？导航栏在很多地方使用，因此向navbarObject添加属性以定义某些操作并不是一个非常好的解决方案。

找到这个解决方案：

export default {
    name: 'inject-store-into-components',
    after: 'store',
    initialize: function(container, application) {
        application.inject('component', 'store', 'service:store');
        application.inject('component', 'router', 'router:main'); 
    }
};

现在我可以做到

this.get('router').transitionTo('blah')

Answer 1

您可以尝试使用提供路由功能的服务，然后注入组件。

有一个插件似乎就是这样 - ember-cli-routing-service

从链接中获取的示例，适用于您的场景：

export default Ember.Component.extend({
 routing: Ember.inject.service(),

 someFunc () {
   this.get('routing').transitionTo(this.get('innerNavObject'). routeToReturn);
 } 
});

Answer 2

使用组件控制您的路由/控制器通常是不好的做法。相反，您希望在您的路线或控制器上有一个动作。然后，您的组件可以向上发送该操作，您的路由或控制器将捕获它（数据向下，操作向上）。

在您的控制器或路线中，您将获得转换操作：

actions: {
  transitionFunction(route) {
    this.transitionTo(route);
  }
}

您还可以在路线或控制器中定义当前路线名称，并将其传递给导航栏组件。控制器可能看起来像：

export default Controller.extend({
  application: inject.controller(),
  currentRoute: computed('application.currentRouteName', function(){
    return get(this, 'application.currentRouteName');
  }),

  actions: {
    transitionFunction(route) {
      this.transitionTo(route);
    }
  }
});

然后调用您的组件并将currentRoute CP传递给它：

{{nav-bar-component currentRoute=currentRoute action='transitionFunction'}}

然后，在您的组件中，您可以使用一个函数从currentRoute中找到父路由：

export default Component.extend({
  click() { // or however you are handling this action
    // current route gives us a string that we split by the . and append index
    const indexRoute = get(this, currentRoute).split('.')[0] + '.index';
    this.sendAction('action', indexRoute);
  }
});

扩展路线

根据您的评论，您可能希望在多个路线或控制器之间进行此操作。在这种情况下，创建一个路由并让其他路由从中扩展。使用操作创建您的路线（就像我在上面创建了控制器一样）。然后将其导入您需要的路线：

import OurCustomRoute from '../routes/yourRouteName';

export default OurCustomRoute.extend({
  ... // additional code here
});

然后您的路线将可以访问您在第一条路线上设置的任何操作或属性。

Ember弃用：使用组件

2 个答案: