我试图理解Angular(有时被称为Angular2+),然后我遇到了@Module:
进口 声明 供应商
遵循Angular快速入门
我试图理解Angular(有时被称为Angular2+),然后我遇到了@Module:
进口 声明 供应商
遵循Angular快速入门
当前回答
import用于导入支持模块,如FormsModule、RouterModule、CommonModule或任何其他定制的特性模块。
declarations are used to declare components, directives, pipes that belong to the current module. Everyone inside declarations knows each other. For example, if we have a component, say UsernameComponent, which displays a list of the usernames and we also have a pipe, say toupperPipe, which transforms a string to an uppercase letter string. Now If we want to show usernames in uppercase letters in our UsernameComponent then we can use the toupperPipe which we had created before but the question is how UsernameComponent knows that the toupperPipe exists and how it can access and use that. Here come the declarations, we can declare UsernameComponent and toupperPipe.
提供程序用于在模块中注入组件、指令和管道所需的服务。
其他回答
组件被声明,模块被导入,服务被提供。我正在使用的一个例子:
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 { }
declarations: This property tells about the Components, Directives and Pipes that belong to this module. exports: The subset of declarations that should be visible and usable in the component templates of other NgModules. imports: Other modules whose exported classes are needed by component templates declared in this NgModule. providers: Creators of services that this NgModule contributes to the global collection of services; they become accessible in all parts of the app. (You can also specify providers at the component level, which is often preferred.) bootstrap: The main application view, called the root component, which hosts all other app views. Only the root NgModule should set the bootstrap property.
角的概念
imports makes the exported declarations of other modules available in the current module declarations are to make directives (including components and pipes) from the current module available to other directives in the current module. Selectors of directives, components or pipes are only matched against the HTML if they are declared or imported. providers are to make services and values known to DI (dependency injection). They are added to the root scope and they are injected to other services or directives that have them as dependency.
提供商的一个特殊情况是惰性加载模块,这些模块获得自己的子注入器。默认情况下,惰性加载模块的提供者只提供给这个惰性加载模块(不像其他模块那样提供给整个应用程序)。
有关模块的更多详细信息,请参见https://angular.io/docs/ts/latest/guide/ngmodule.html
导出使组件、指令和管道可以在将该模块添加到导入的模块中使用。导出也可以用来重新导出模块,如CommonModule和FormsModule,这通常是在共享模块中完成的。 entryComponents为离线编译注册组件,以便它们可以与ViewContainerRef.createComponent()一起使用。路由器配置中使用的组件是隐式添加的。
TypeScript (ES2015)导入
进口…from 'foo/bar'(可能解析为index.ts)用于TypeScript导入。当你在一个typescript文件中使用一个在另一个typescript文件中声明的标识符时,你就需要这些标识符。
Angular的@NgModule()导入和TypeScript的导入是完全不同的概念。
参见jDriven - TypeScript和ES6导入语法
它们中的大多数实际上是TypeScript也使用的普通ECMAScript 2015 (ES6)模块语法。
添加一个快速备考表,可能会在长时间使用Angular后有所帮助:
声明
例子:
声明(AppComponent):
我们可以在这里注入什么?组件,管道,指令
进口
例子:
import: [BrowserModule, AppRoutingModule]
我们可以在这里注入什么?其他模块
供应商
例子:
供应商(UserService):
我们可以在这里注入什么?服务
引导
例子:
引导(AppComponent):
我们可以在这里注入什么?此模块将生成的主组件(组件树的顶部父节点)
输入组件
例子:
entryComponents (PopupComponent):
我们可以在这里注入什么?动态生成的组件(例如通过使用ViewContainerRef.createComponent())
出口
例子:
export: [TextDirective, PopupComponent, BrowserModule]
我们可以在这里注入什么?我们希望在另一个模块中访问的组件、指令、模块或管道(在导入该模块后)
import用于导入支持模块,如FormsModule、RouterModule、CommonModule或任何其他定制的特性模块。
declarations are used to declare components, directives, pipes that belong to the current module. Everyone inside declarations knows each other. For example, if we have a component, say UsernameComponent, which displays a list of the usernames and we also have a pipe, say toupperPipe, which transforms a string to an uppercase letter string. Now If we want to show usernames in uppercase letters in our UsernameComponent then we can use the toupperPipe which we had created before but the question is how UsernameComponent knows that the toupperPipe exists and how it can access and use that. Here come the declarations, we can declare UsernameComponent and toupperPipe.
提供程序用于在模块中注入组件、指令和管道所需的服务。