Question

我向您展示以下代码：

https://plnkr.co/edit/xxNW1xAIPoGtTK84OxGq

注意：由于我无法配置的SystemJS，这不起作用。谁愿意可以编辑，如果自由地使其工作。我一直在使用angular-cli和默认的webpack配置，这很有效。

我的问题是关于＆＃34; AlertService＆＃34;需要显示＆＃34;警报＆＃34;。它已在核心模块中提取。但是，当我需要使用它时，我将它import { AlertService } from '../core/alert/alert.service'导入为dashboard.component.ts，以便注入它。

这是否打破了模块化方法，因为我必须给它提供课程的路径？如果我在CoreModule中更改AlertService的位置，我仍然需要更改DashboardComponent中的字符串。同样在这个例子中，如果不存在AlertService，DashboardComponent将不会触发...但是DashboardComponent是DashboardModule的一部分，它应该能够自己启动 - 否则如果它们是静态耦合的话模块的重点是什么我可以放一切都在一个地方。

我想要的是创建一个通用警报组件，我只需要在整个应用程序中包含它，并且能够在任何地方使用它。

但我认为我误解了模块的概念和/或如何使用它们。我已经阅读过模块＆＃39; Angular.io中的部分多次，并经历了多个教程。

祝你好运

Answer 1

如果必须更改大量文件路径，那么一个可能的解决方案是添加另一个层 - 创建一个services.ts文件，然后在那里进行规范导入而不是在每个组件中。这样，如果更改路径，则只需更新一个文件：

services.ts：

import { AlertService } from './alert.service';

// ES2015 shorthand property initializer
export default {
    AlertService
};

yourComponent.ts：

import { AlertService } from "../services";
...

如果您希望组件即使不存在服务也能正常工作，您可以make it an optional dependency（如果不存在则返回null），但TypeScript强制您仍需要导入服务到文件中以获得代码完成/打字。对我来说，总觉得有点笨拙。

Angular2模块化系统打破模块化

1 个答案: