[angular] NgModule에서 선언, 공급자 및 수입의 차이점은 무엇입니까?

Program / 글쓴이

나는 각도를 (때로는 Angular2 + 전화) 이해하려고 노력하고, 그럼 내가 건너 온 @Module:

  1. 수입

  2. 선언

  3. 공급자

다음 각도 빠른 시작

답변

각도 개념

  • imports 다른 모듈의 내 보낸 선언을 현재 모듈에서 사용할 수있게합니다.
  • declarations현재 모듈의 지시문 (구성 요소 및 파이프 포함)을 현재 모듈의 다른 지시문에 사용할 수 있도록해야합니다. 지시문, 구성 요소 또는 파이프의 선택기는 선언되거나 가져온 경우에만 HTML과 일치합니다.
  • providersDI (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) 모듈 구문입니다.

답변

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구조 :

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

답변

Angular로 오랫동안 휴식을 취한 후 도움이 될 수있는 빠른 치트 시트 추가 :

선언

예:

declarations: [AppComponent]

여기에 무엇을 주입 할 수 있습니까? 구성 요소, 파이프, 지침

수입

예:

imports: [BrowserModule, AppRoutingModule]

여기에 무엇을 주입 할 수 있습니까? 다른 모듈

공급자

예:

providers: [UserService]

여기에 무엇을 주입 할 수 있습니까? 서비스

병줄

예:

bootstrap: [AppComponent]

여기에 무엇을 주입 할 수 있습니까? 이 모듈에 의해 생성 될 주요 컴포넌트 (컴포넌트 트리의 최상위 부모 노드)

엔트리 구성 요소

예:

entryComponents: [PopupComponent]

여기에 무엇을 주입 할 수 있습니까? 동적으로 생성 된 구성 요소 (예 : ViewContainerRef.createComponent () 사용)

수출

예:

export: [TextDirective, PopupComponent, BrowserModule]

여기에 무엇을 주입 할 수 있습니까? 다른 모듈에서 액세스하려는 구성 요소, 지시문, 모듈 또는 파이프 (이 모듈을 가져온 후)

답변

  1. 선언 :이 속성은이 모듈에 속하는 구성 요소, 지시문 및 파이프에 대해 알려줍니다.
  2. exports : 다른 NgModules의 컴포넌트 템플릿에서 볼 수 있고 사용할 수있는 선언의 하위 집합.
  3. imports :이 NgModule에 선언 된 컴포넌트 템플릿에 의해 익스포트 된 클래스가 필요한 다른 모듈.
  4. 제공자 :이 NgModule이 글로벌 서비스 콜렉션에 기여하는 서비스 작성자; 앱의 모든 부분에서 액세스 할 수 있습니다. 구성 요소 수준에서 공급자를 지정할 수도 있습니다. 이는 종종 선호됩니다.
  5. bootstrap : 루트 구성 요소라고하는 기본 응용 프로그램보기로, 다른 모든 응용 프로그램보기를 호스팅합니다. 루트 NgModule 만 부트 스트랩 특성을 설정해야합니다.

답변