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


답변:


516

각도 개념

  • 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) 모듈 구문입니다.


1
최신 권장 사항은 forRoot()지연로드 된 모듈을 사용 하는 대신 앱 전체 공급자를 CoreModule에 배치하는 것 입니다. 동의하십니까? 코어 모듈을 참조하십시오 . # shared-module-for-root에 대한 링크가 더 이상 존재하지 않습니다.
Mark Rajcok

1
훌륭한 설명. 감사합니다, @ günter-zöchbauer. 만 언급 AFAIK가있다 importJS (ES2015) 기능이다 하지 타이프 하나. :)
cassi.lup

그리고 NgModule에서 수출 [] 무엇 수출 같은 빨아 : [MatCheckBox]
Omar

4
솔직히 말해서, Angular 의 NgModule의 디자인은 VueReact 와 비교하여 서투르고 모호 합니다. 을 사용하여 다른 모듈을 가져와야 imports하지만을 사용하여 선언 가능 요소 (구성 요소, 지시문, 파이프)를 내보내십시오 exports. 따라서, 주요 목표 importsexports는 다릅니다. 대신의 주요 목표는 exports입니다 declarations. 로 구성 요소를 선언 declarations하지만 동적로드 된 구성 요소의 경우에 배치해야합니다 entryComponents. 한편,는 providersDI에 의해 다른 이야기에서 관리됩니다.
xuemind

1
복잡한 프레임 워크를 설명하는 복잡한 답변
Donato

85

imports FormsModule, RouterModule, CommonModule 또는 기타 사용자 정의 기능 모듈과 같은 지원 모듈을 가져 오는 데 사용됩니다.

declarations현재 모듈에 속하는 구성 요소, 지시문, 파이프를 선언하는 데 사용됩니다. 선언 내부의 모든 사람들은 서로를 알고 있습니다. 예를 들어, 사용자 이름 목록을 표시하는 구성 요소 (예 : UsernameComponent)가 있고 문자열을 대문자 문자열로 변환하는 파이프 (toupperPipe)도 있습니다. 이제 UsernameComponent에 사용자 이름을 대문자로 표시하려면 이전에 만든 toupperPipe를 사용할 수 있지만 질문은 UsernameComponent가 toupperPipe가 존재한다는 것을 알고 어떻게 toupperPipe가 액세스하고 사용할 수 있는지에 대한 질문입니다. 여기에 선언이 나오고, UsernameComponent와 toupperPipe를 선언 할 수 있습니다.

Providers 모듈의 구성 요소, 지시문, 파이프에 필요한 서비스를 주입하는 데 사용됩니다.


3
"선언 : 현재 모듈에 속하는 컴포넌트, 지시문, 파이프를 선언하는 데 사용됩니다. 선언 내부의 모든 것은 서로를 알고 있습니다." 이것은 받아 들여질만한 답변이어야합니다
Deen John

60

구성 요소가 선언되고 모듈을 가져오고 서비스가 제공됩니다. 내가 일하고있는 예 :

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

3
이 설명의 단순함이 마음에 들지만 "stuffsThisComponentNeeds"속성이 하나 밖에없는 이유가 궁금합니다. 모두 동일한 것을 처리하는 것처럼 보이므로 현재 구성 요소에서 다른 코드 조각을 사용할 수 있습니다.
redOctober13

1
@ redOctober13 동의합니다. 예를 들어 Node.js에서 DB 모델, 모듈, 서비스 또는 설치된 타사 패키지인지 여부에 관계없이 모든 것을 동일한 방식으로 가져옵니다. 그리고 reactJS
SanSolo

18

각도 @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 { }

10

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


선언

예:

declarations: [AppComponent]

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


수입

예:

imports: [BrowserModule, AppRoutingModule]

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


공급자

예:

providers: [UserService]

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


병줄

예:

bootstrap: [AppComponent]

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


엔트리 구성 요소

예:

entryComponents: [PopupComponent]

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


수출

예:

export: [TextDirective, PopupComponent, BrowserModule]

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


1
수출은 어떻습니까?
lugte098

나는이 목록에 수출을 추가했습니다 @ lugte098
Przemek Struciński

나는 설명을 위해이 레이아웃을 좋아합니다. 매우 소화 가능합니다. 감사!
Aaron Jordan

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