답변:
각도 개념
imports
다른 모듈의 내 보낸 선언을 현재 모듈에서 사용할 수있게합니다.declarations
현재 모듈의 지시문 (구성 요소 및 파이프 포함)을 현재 모듈의 다른 지시문에 사용할 수 있도록해야합니다. 지시문, 구성 요소 또는 파이프의 선택기는 선언되거나 가져온 경우에만 HTML과 일치합니다.providers
DI (dependency injection)에 알려진 서비스와 값을 만들어야합니다. 그것들은 루트 범위에 추가되고 다른 서비스 또는 지시문에 의존성으로 주입됩니다.특별한 경우 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
와 TypeScript import
는 완전히 다른 개념 입니다.
jDriven-TypeScript 및 ES6 가져 오기 구문 도 참조하십시오.
대부분은 실제로 TypeScript가 사용하는 일반 ECMAScript 2015 (ES6) 모듈 구문입니다.
import
JS (ES2015) 기능이다 하지 타이프 하나. :)
imports
하지만을 사용하여 선언 가능 요소 (구성 요소, 지시문, 파이프)를 내보내십시오 exports
. 따라서, 주요 목표 imports
와 exports
는 다릅니다. 대신의 주요 목표는 exports
입니다 declarations
. 로 구성 요소를 선언 declarations
하지만 동적로드 된 구성 요소의 경우에 배치해야합니다 entryComponents
. 한편,는 providers
DI에 의해 다른 이야기에서 관리됩니다.
imports
FormsModule, RouterModule, CommonModule 또는 기타 사용자 정의 기능 모듈과 같은 지원 모듈을 가져 오는 데 사용됩니다.
declarations
현재 모듈에 속하는 구성 요소, 지시문, 파이프를 선언하는 데 사용됩니다. 선언 내부의 모든 사람들은 서로를 알고 있습니다. 예를 들어, 사용자 이름 목록을 표시하는 구성 요소 (예 : UsernameComponent)가 있고 문자열을 대문자 문자열로 변환하는 파이프 (toupperPipe)도 있습니다. 이제 UsernameComponent에 사용자 이름을 대문자로 표시하려면 이전에 만든 toupperPipe를 사용할 수 있지만 질문은 UsernameComponent가 toupperPipe가 존재한다는 것을 알고 어떻게 toupperPipe가 액세스하고 사용할 수 있는지에 대한 질문입니다. 여기에 선언이 나오고, UsernameComponent와 toupperPipe를 선언 할 수 있습니다.
Providers
모듈의 구성 요소, 지시문, 파이프에 필요한 서비스를 주입하는 데 사용됩니다.
구성 요소가 선언되고 모듈을 가져오고 서비스가 제공됩니다. 내가 일하고있는 예 :
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 { }
@NgModule
구조 :import { x } from 'y';
: ES2015/ES6
다른 파일에서 코드를 가져 오기위한 표준 유형 스크립트 구문 ( 모듈 구문)입니다. 이것은 Angular에 한정되지 않습니다 . 또한 이것은 기술적으로 모듈의 일부가 아니며이 파일의 범위 내에서 필요한 코드를 가져 오기 만하면됩니다.imports: [FormsModule]
: 여기에 다른 모듈을 가져옵니다. 예를 FormsModule
들어 아래 예에서 가져옵니다 . 이제이 모듈 전체에서 FormsModule이 제공하는 기능을 사용할 수 있습니다.declarations: [OnlineHeaderComponent, ReCaptcha2Directive]
: 컴포넌트, 지시문 및 파이프를 여기에 넣습니다. 여기에 선언되면 이제 전체 모듈에서 사용할 수 있습니다. 예를 들어 우리는 이제 사용할 수 있습니다 OnlineHeaderComponent
에서 AppComponent
보기 (HTML 파일). Angular OnlineHeaderComponent
는에 선언되어 있기 때문에 어디서 찾을 수 있는지 알고 @NgModule
있습니다.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 { }
Angular로 오랫동안 휴식을 취한 후 도움이 될 수있는 빠른 치트 시트 추가 :
예:
declarations: [AppComponent]
여기에 무엇을 주입 할 수 있습니까? 구성 요소, 파이프, 지침
예:
imports: [BrowserModule, AppRoutingModule]
여기에 무엇을 주입 할 수 있습니까? 다른 모듈
예:
providers: [UserService]
여기에 무엇을 주입 할 수 있습니까? 서비스
예:
bootstrap: [AppComponent]
여기에 무엇을 주입 할 수 있습니까? 이 모듈에 의해 생성 될 주요 컴포넌트 (컴포넌트 트리의 최상위 부모 노드)
예:
entryComponents: [PopupComponent]
여기에 무엇을 주입 할 수 있습니까? 동적으로 생성 된 구성 요소 (예 : ViewContainerRef.createComponent () 사용)
예:
export: [TextDirective, PopupComponent, BrowserModule]
여기에 무엇을 주입 할 수 있습니까? 다른 모듈에서 액세스하려는 구성 요소, 지시문, 모듈 또는 파이프 (이 모듈을 가져온 후)
forRoot()
지연로드 된 모듈을 사용 하는 대신 앱 전체 공급자를 CoreModule에 배치하는 것 입니다. 동의하십니까? 코어 모듈을 참조하십시오 . # shared-module-for-root에 대한 링크가 더 이상 존재하지 않습니다.