NgModule中declarations、providers和import有什么不同?
NgModule中declarations、providers和import有什么不同?
我正在努力了解 Angular(有时称为 Angular2+),然后我遇到了@Module
:
- 导入
- 声明
- 提供者
遵循 Angular 快速入门指南
导入
用于导入支持模块,如FormsModule、RouterModule、CommonModule或任何其他自定义特征模块。
声明
用于声明属于当前模块的组件、指令、管道等。在声明中,每个人都互相认识。例如,假设我们有一个组件,叫做UsernameComponent,它会显示用户名列表,我们还有一个管道,叫做toupperPipe,它会把一个字符串转换为大写字母字符串。现在,如果我们想在UsernameComponent中显示大写字母的用户名,那么我们可以使用之前创建的toupperPipe,但问题是UsernameComponent如何知道toupperPipe存在,如何访问和使用它。在这里,声明发挥了作用,我们可以声明UsernameComponent和toupperPipe。
提供商
用于为模块中的组件、指令、管道注入所需的服务。
Angular概念
imports
使得其他模块导出的声明在当前模块中可用。declarations
将当前模块的指令(包括组件和管道)对其他指令可用。指令、组件或者管道的选择器只有在它们被声明或者导入之后才会在HTML中匹配。providers
将服务和值暴露给DI(依赖注入)。它们被添加到根作用域中,并且被注入到其他有它们作为依赖的服务或指令中。
providers
的特殊情况是懒加载模块,它们有自己的子注入器。默认情况下,懒加载模块的providers
仅提供给这个懒加载模块(与其他模块提供整个应用程序的方式不同)。
有关模块的更多细节,请参阅https://angular.io/docs/ts/latest/guide/ngmodule.html
-
exports
使得组件、指令和管道在将该模块添加到imports
的模块中可用。exports
也可以用于重新导出模块,例如CommonModule和FormsModule,这通常在共享模块中完成。 -
entryComponents
为离线编译注册了组件,以便可以在ViewContainerRef.createComponent()
中使用它们。在路由配置中使用的组件是隐式添加的。
TypeScript(ES2015)导入
import ... from 'foo/bar'
(可能会解析为index.ts
)是 TypeScript 导入所需的内容。在 TypeScript 文件中使用在另一个 TypeScript 文件中声明的标识符时,您需要使用这些内容。
Angular 的 @NgModule()
imports
和 TypeScript 的 import
是完全不同的概念。
另请参阅jDriven - TypeScript and ES6 import syntax
实际上,它们大多数都是纯 ECMAScript 2015(ES6)模块语法,TypeScript 也使用这些语法。