NgModule中declarations、providers和import有什么不同?

35 浏览
0 Comments

NgModule中declarations、providers和import有什么不同?

我正在努力了解 Angular(有时称为 Angular2+),然后我遇到了@Module

  1. 导入
  2. 声明
  3. 提供者

遵循 Angular 快速入门指南

admin 更改状态以发布 2023年5月23日
0
0 Comments

导入用于导入支持模块,如FormsModule、RouterModule、CommonModule或任何其他自定义特征模块。

声明用于声明属于当前模块的组件、指令、管道等。在声明中,每个人都互相认识。例如,假设我们有一个组件,叫做UsernameComponent,它会显示用户名列表,我们还有一个管道,叫做toupperPipe,它会把一个字符串转换为大写字母字符串。现在,如果我们想在UsernameComponent中显示大写字母的用户名,那么我们可以使用之前创建的toupperPipe,但问题是UsernameComponent如何知道toupperPipe存在,如何访问和使用它。在这里,声明发挥了作用,我们可以声明UsernameComponent和toupperPipe。

提供商用于为模块中的组件、指令、管道注入所需的服务。

0
0 Comments

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 也使用这些语法。

0