NgModule中的声明,提供程序和导入有什么区别？

Question

我试图理解Angular(有时称为Angular2 +),然后我遇到了@Module:

1. 进口

2. 声明

3. 供应商

遵循Angular快速入门

Answer 1

角度概念

• 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'(可以解析为aindex.ts)用于TypeScript导入.只要在另一个打字稿文件中声明的打字稿文件中使用标识符,就需要这些.

Angular @NgModule() imports和TypeScript import是完全不同的概念.

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

其中大多数实际上是TypeScript使用的简单的ECMAScript 2015(ES6)模块语法.

Answer 2

imports:用于导入支持模块,如FormsModule,RouterModule,CommonModule或任何其他自定义功能模块.

declarations:用于声明属于当前模块的组件,指令和管道.声明中的所有内容都相互了解.例如,如果我们有一个组件,比如UsernameComponent,它显示用户名列表,我们也有一个管道,比如toupperPipe,它将字符串转换为大写字母字符串.现在如果我们想在UsernameComponent中以大写字母显示用户名,我们可以使用之前创建的toupperPipe但是UsernameComponent如何知道toupperPipe存在以及我们如何访问和使用它,这里是声明,我们可以声明UsernameComponent和toupperPipe.

Providers:用于注入模块中组件,指令,管道所需的服务.

请在此处详细阅读:https://angular.io/docs/ts/latest/guide/ngmodule.html

Answer 3

声明组件,导入模块,并提供服务.我正在使用的一个例子:

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 { }

Answer 4

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

声明

例子：

declarations: [AppComponent]

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

进口

例子：

imports: [BrowserModule, AppRoutingModule]

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

供应商

例子：

providers: [UserService]

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

引导程序

例子：

bootstrap: [AppComponent]

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

入口组件

例子：

entryComponents: [PopupComponent]

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

出口

例子：

export: [TextDirective, PopupComponent, BrowserModule]

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

Answer 5

角@NgModule构造:

1. import { x } from 'y';:这是ES2015/ES6用于从其他文件导入代码的标准typescript语法(模块语法).这不是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 { }

Answer 6

1. 声明：该属性告诉有关属于该模块的组件、指令和管道的信息。
2. Exports：在其他 NgModule 的组件模板中应该可见和可用的声明子集。
3. import：此 NgModule 中声明的组件模板需要其导出类的其他模块。
4. providers：该 NgModule 为全球服务集合贡献的服务的创建者；它们可以在应用程序的所有部分中访问。（您还可以在组件级别指定提供程序，这通常是首选。）
5. bootstrap：主应用程序视图，称为根组件，它托管所有其他应用程序视图。只有根 NgModule 才应该设置 bootstrap 属性。