479

我试图了解 Angular（有时称为 Angular2+），然后我遇到了@Module：

  1. 进口

  2. 声明

  3. 提供者

遵循Angular 快速入门

4

6 回答 6

600

角度概念

  • 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 导入。每当您在另一个打字稿文件中声明的打字稿文件中使用标识符时，您都需要这些。

Angular @NgModule() imports和 TypeScriptimport是完全不同的概念。

另请参阅jDriven - TypeScript 和 ES6 导入语法

它们中的大多数实际上是 TypeScript 也使用的纯 ECMAScript 2015 (ES6) 模块语法。

于 2016-08-21T10:33:14.377 回答
116

imports用于导入支持模块，如 FormsModule、RouterModule、CommonModule 或任何其他定制的功能模块。

declarations用于声明属于当前模块的组件、指令、管道。声明中的每个人都互相认识。例如，如果我们有一个组件，比如 UsernameComponent，它显示用户名列表，我们还有一个管道，比如 toupperPipe，它将字符串转换为大写字母字符串。现在，如果我们想在 UsernameComponent 中以大写字母显示用户名，那么我们可以使用我们之前创建的 toupperPipe，但问题是 UsernameComponent 如何知道 toupperPipe 存在以及它如何访问和使用它。声明来了，我们可以声明 UsernameComponent 和 toupperPipe。

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

于 2016-08-21T10:43:25.680 回答
85

声明组件，导入模块，并提供服务。我正在使用的一个例子：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


import { AppComponent } from './app.component';
import {FormsModule} from '@angular/forms';
import { UserComponent } from './components/user/user.component';
import { StateService } from './services/state.service';    

@NgModule({
  declarations: [
    AppComponent,
    UserComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [ StateService ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }
于 2018-01-15T10:48:41.353 回答
31

添加一个快速备忘单，在长时间使用 Angular 后可能会有所帮助：

声明

例子：

declarations: [AppComponent]

我们可以在这里注入什么？组件、管道、指令

进口

例子：

imports: [BrowserModule, AppRoutingModule]

我们可以在这里注入什么？其他模块

供应商

例子：

providers: [UserService]

我们可以在这里注入什么？服务

引导程序

例子：

bootstrap: [AppComponent]

我们可以在这里注入什么？该模块将生成的主要组件（组件树的顶部父节点）

入口组件

例子：

entryComponents: [PopupComponent]

我们可以在这里注入什么？动态生成的组件（例如通过使用 ViewContainerRef.createComponent()）

出口

例子：

export: [TextDirective, PopupComponent, BrowserModule]

我们可以在这里注入什么？ 我们希望在另一个模块中访问它们的组件、指令、模块或管道（在导入此模块后）

于 2019-09-03T13:56:29.903 回答
21

角@NgModule结构：

  1. import { x } from 'y';：这是用于从其他文件导入代码的标准打字稿语法（ES2015/ES6模块语法）。这不是 Angular 特定的。此外，这在技术上不是模块的一部分，只需要在此文件范围内获取所需的代码。
  2. imports: [FormsModule]: 你在这里导入其他模块。例如我们FormsModule在下面的示例中导入。现在我们可以使用 FormsModule 在整个模块中提供的功能。
  3. declarations: [OnlineHeaderComponent, ReCaptcha2Directive]: 你把你的组件、指令和管道放在这里。一旦在这里声明，您现在可以在整个模块中使用它们。例如，我们现在可以OnlineHeaderComponent在AppComponent视图（html 文件）中使用。Angular 知道在哪里可以找到它，OnlineHeaderComponent因为它是在@NgModule.
  4. providers: [RegisterService]：这里定义了我们这个特定模块的服务。您可以通过依赖注入来使用组件中的服务。

示例模块：

// Angular
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

// Components
import { AppComponent } from './app.component';
import { OfflineHeaderComponent } from './offline/offline-header/offline-header.component';
import { OnlineHeaderComponent } from './online/online-header/online-header.component';

// Services
import { RegisterService } from './services/register.service';

// Directives
import { ReCaptcha2Directive } from './directives/re-captcha2.directive';

@NgModule({
  declarations: [
    OfflineHeaderComponent,,
    OnlineHeaderComponent,
    ReCaptcha2Directive,
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
  ],
  providers: [
    RegisterService,
  ],
  entryComponents: [
    ChangePasswordComponent,
    TestamentComponent,
    FriendsListComponent,
    TravelConfirmComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }
于 2018-10-15T17:14:54.213 回答
5
  1. 声明：该属性说明属于该模块的组件、指令和管道。
  2. export ：声明的子集，应该在其他 NgModules 的组件模板中可见和可用。
  3. import：在这个 NgModule 中声明的组件模板需要其导出类的其他模块。
  4. providers：这个 NgModule 贡献给全球服务集合的服务的创建者；它们在应用程序的所有部分都可以访问。（您还可以在组件级别指定提供程序，这通常是首选。）
  5. bootstrap：主应用程序视图，称为根组件，它托管所有其他应用程序视图。只有根 NgModule 应该设置引导属性。
于 2019-12-31T06:01:22.903 回答