在 Ember 插件中实现路由

Question

我是新来的余烬。 我计划创建一个插件以在整个应用程序中共享。 我的插件有屏幕导航。 我不知道如何在 ember 插件中应用路由或实现路由。 此外，我还想与消费应用程序共享插件。 任何人都可以提出任何简单的示例来说明如何实现吗？

Answer 1

选择 Ember 插件进行功能共享是一个不错的选择。 但是，附加组件主要用于添加/增强更集中的功能。

为了跨应用程序重用/共享页面（路由），Ember 有一个名为Ember-Engines的特定解决方案。

按照官方指南，

从用户的角度来看，引擎允许将多个逻辑应用程序组合成一个应用程序。

因此，我们可以在引擎中拥有多个页面（类似于任何其他独立的 Ember 应用程序），并轻松地将这些页面安装在主机应用程序中。

Answer 2

Ember 插件的app文件夹与消费应用程序的app文件夹合并。 虽然这主要用于提供组件和服务，但它对路由、控制器和路由模板的工作方式相同。 通过 Ember 插件共享提供路线的唯一棘手之处是注册它们。

注册 Ember 插件提供的路由有两种解决方案：

1. 从 Ember 插件中导出一个方法，消费应用程序应使用该方法在路由器中注册路由。
2. 在 Addon 提供的实例 initalizier 中导入应用程序路由器并在其上注册路由。

第一种方法如下所示：

// in addon: /addon/index.js

export function registerRoutes(router) {
  router.map(function () {
    this.route('foo');
  });
}

// in consuming application: /app/router.js

import EmberRouter from '@ember/routing/router';
import config from './config/environment';
import { registerRoutes } from 'my-addon';

const Router = EmberRouter.extend({
  location: config.locationType,
  rootURL: config.rootURL
});

Router.map(function() {
  // application routes are registered as usual
});

// register routes provided by addon
registerRoutes(Router);

export default Router;

第二种方法稍微复杂一些，但不需要对使用应用程序进行任何更改。 您可能会将其视为一种优势或应避免的令人困惑的魔法。

// in addon: /app/instance-initaliziers/my-addon.js

// as this is merged with application's app tree, we can import files from application
import ApplicationRouter from '../router';

export function initialize() {
  // register as you would do in app/router.js
  ApplicationRouter.map(function() {
    this.route('foo');
  });
}

export default {
  initialize
};