Angular2模块化系统打破了模块化

Question

我给你下面的代码:

https://plnkr.co/edit/xxNW1xAIPoGtTK84OxGq

注意:这不起作用，因为我无法配置SystemJS。任何想要的人都可以自由地编辑它，使其发挥作用。我一直在使用angular-cli和默认的webpack配置，这是有效的。

我的问题是关于"AlertService"这是需要显示一个"警报"。它已在核心模块中提取。然而，当我需要使用它时，我导入它，就像import { AlertService } from '../core/alert/alert.service'存在于dashboard.component.ts中一样，以便注入它。

这不是打破了模块化的方法，因为我必须给它的路径到类?如果我在CoreModule中改变了AlertService的位置，我仍然需要去改变DashboardComponent中的字符串。同样在这个例子中，如果AlertService不存在，DashboardComponent将不会触发…但是DashboardComponent是DashboardModule的一部分，它应该能够自己启动——否则，如果这些模块是静态耦合的，我可以把所有的东西都放在一个地方。

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

但是我认为我误解了模块的概念和/或如何使用它们。我已经阅读了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";
...

如果你想让一个组件即使在服务不存在的情况下也能工作，你可以让它成为一个可选的依赖项(如果它不存在，返回null)，但是TypeScript强制你仍然必须将服务导入到文件中以获得代码完成/类型。