javascript - 为什么 Angular 文档建议同时在模块和组件级别导入？

Question

在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';

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

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

Answer 1

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

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

进一步说明

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

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

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

更新

在 typescript 中可以有 index 文件，这些文件通常用于导出元素而不必深入到文件夹结构中，'@angular/forms' 的文件 em> 导出以下内容(除其他外):

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

form_providers 有 FormsModule 和 ReactiveFormsModule 的声明。

因此您可以从一个文件导入您的模块和类。