为什么 Angular 文档建议在模块和组件级别导入？答案

【问题标题】：Why do Angular docs suggest importing both on module and on component level?为什么 Angular 文档建议在模块和组件级别导入？
【发布时间】：2018-10-26 15:58:07
【问题描述】：

在docs for reactive forms 中，建议我将以下几行添加到我的app.module.ts。

import { ReactiveFormsModule } from '@angular/forms';
...
@NgModule({ imports: [ ReactiveFormsModule, ... ], ... })
export class AppModule { }

然后，在a later section 中，建议在我的actual.component.ts 中也添加以下内容。

import { FormControl, FormGroup } from '@angular/forms';

我尝试跳过模块部分，只导入组件中的内容，据我所知，这似乎可行。在我看来，如果我做相反的事情并添加模块部分，我就不必导入该模块的组件，这似乎是合理的。让我困惑的是模块部分和组件部分的组合。

我不明白这两个操作一起的目的。他们为什么这样做？

【问题讨论】：

标签： javascript angular typescript import module

【解决方案1】：

在模块级别导入允许您将该模块声明为模块的依赖项，从而能够在模板中使用其提供程序、指令、管道和其他内容。

在组件级别导入允许您在打字稿代码中使用这些类。

进一步说明

在 Angular 导入模块中“合并”该模块，以便在编译模板时将模板元素（组件、指令和管道）识别为 Angular 元素。

在 typescript 和 javascript 中，为了使用在另一个文件或模块中声明的代码（类、函数、常量），您需要导入它，在 node 中您使用 require() 函数，在 typescript 中使用 import from 表达式.

因此，如果您查看您的代码，您会意识到您正在导入两个不同的东西，模块和类，第一个是为了合并该模块，第二个是为了使用该类。\

更新

在打字稿中，可以有 index 文件，这些文件通常用于导出元素而不必深入文件夹结构，'@angular/forms'的文件 em> 导出以下内容（除其他外）：

export {AbstractControl, AbstractControlOptions, FormArray, FormControl, FormGroup} from './model';
export * from './form_providers';

其中form_providers 有FormsModule 和ReactiveFormsModule 的声明。

因此，您可以从一个文件中同时导入模块和类。

【讨论】：

是的，但这并不能真正回答我的问题。这与提供者、管道等无关。它专门针对他们示例中的模块。它也被添加到应用程序的根模块中，因此它也不意味着要导入其他东西。请详细说明。

【解决方案2】：

简单来说：

导入模块允许您使用模块的功能。反应式表单允许您使用FormBuilders 创建FormGroups，其中包含FormControls。

导入组件中的功能允许您使用这些功能。如果您不这样做，您的 IDE 将不知道 FormGroup 或 FormControl 的含义。

它可能在不导入功能的情况下工作，因为它们已加载到包中，但如果您尝试构建应用程序而不导入它们，则会引发错误。

此外，您需要在要使用其功能的地方导入模块。在 Angular 中，模块不会从它们的父级继承，因此如果您导入的模块级别太高，您将无法访问它。

【讨论】：