Angular2 - NgModule 之外的组件注入答案

【问题标题】：Angular2 - Component Injection outside of NgModuleAngular2 - NgModule 之外的组件注入
【发布时间】：2016-12-14 11:48:06
【问题描述】：

我是 A2 的新手，所以这个问题之前可能有人问过，但我使用了错误的术语，所以找不到答案。

但是，我试图了解 A2 中的 @Component 注入。据我所知，所有组件，无论它们多么嵌套，都必须在根级别声明为 NgModules 文件的一部分（即此处声明的服务可以通过所有组件访问）

@NgModule({
    imports: [
        ...
    ],
    declarations: [
        1stComponent,
        2ndComponent,
        3rdComponent,
        4thComponent     <-- All components must be included here
    ],
    providers: [
       ...
    ],
    bootstrap: [
        AppComponent
    ]
})

对我来说，这似乎有点奇怪。如果您有一个仅作为ParentComponent 的一部分显示的ChildComponent，该怎么办？为什么ChildComponent 需要在NgModule 级别声明？这个ChildComponent 在需要时可以不被声明为父组件的一部分吗？在加载应用程序时预先声明所有组件是否不会导致开销 - 它需要预先准备好所有内容？还是只是 NgModule 定义了构建的组件，而不是它们在运行时显示的时间或方式？

【问题讨论】：

标签： javascript angular typescript

【解决方案1】：

在 Angular 的早期版本中，它按照您期望的方式运行（即每个组件都定义了它自己的依赖项）。大约在 RC 发布时，A2 团队决定对其进行更改。

正如 Estus 所说，您可以使用延迟加载。有一个很好的参考指南here 展示了如何做到这一点。（向下滚动到'延迟加载主页模块'部分）。

基本上，Angular 团队决定允许您将应用程序分割成不同的模块，其中所有组件和指令依赖关系是在模块级别定义的。如果您真的担心初始负载过多，请分开分成不同的模块。

也回答您的问题，是的，通过在 app.module.ts 的声明数组中定义您的组件，您随后将加载它们。（因为您必须首先将它们导入文件中才能引用它们）。

【讨论】：