NgModule에서 선언, 제공자 및 가져오기의 차이점은 무엇입니까?

NgModule에서 선언, 제공자 및 가져오기의 차이점은 무엇입니까?

Angular를하다가 Angular2 알게 .@Module:

1. 수입품

2. 선언문

3. 공급자

Angular 빠른 시작 따라하기

각도 개념

• imports에서 내보낸 할 수 있도록 .
• declarations현재 모듈의 지침(구성 요소 및 파이프 포함)을 현재 모듈의 다른 지침에서 사용할 수 있도록 합니다.지시사항, 구성요소 또는 파이프의 선택기는 선언되거나 가져온 경우에만 HTML과 일치합니다.
• providersDI(의존성 주입)에 서비스와 값을 알리는 것입니다.루트 범위에 추가되고 종속성으로 지정된 다른 서비스 또는 지시어에 주입됩니다.

을 위한 특별한 경우.providers자체 자식 인젝터를 얻는 게으른 로드 모듈입니다. providersLazy Loaded 모듈의 경우 기본적으로 이 Lazy Loaded 모듈에만 제공됩니다(다른 모듈과 마찬가지로 전체 애플리케이션에는 제공되지 않음).

모듈에 대한 자세한 내용은 https://angular.io/docs/ts/latest/guide/ngmodule.html 도 참조하십시오.

• exports에서는 이 을 에 추가하는 및 할 수 있도록 .imports.exports공유 모듈에서 자주 수행되는 CommonModule 및 FormsModule과 같은 모듈을 다시 내보내는 데도 사용할 수 있습니다.

• entryComponents 요소를 하여 에서 사록오 컴인을위파일과 함께 할 수 .ViewContainerRef.createComponent()라우터 구성에 사용되는 구성요소가 암시적으로 추가됩니다.

TypeScript(ES2015) 가져오기

import ... from 'foo/bar'(으로 해결될 수 있음)은 TypeScript 가져오기용입니다.다른 형식 스크립트 파일에 선언된 형식 스크립트 파일의 식별자를 사용할 때마다 이러한 정보가 필요합니다.

앵귤즈러@NgModule() imports TypeScript » TypeScriptimport완전히 다른 개념입니다.

참고 항목jDriven - TypeScript 및 ES6 가져오기 구문

대부분은 실제로 TypeScript가 사용하는 일반 ECMAscript 2015(ES6) 모듈 구문입니다.

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

declarations현재 모듈에 속하는 구성 요소, 지침, 파이프를 선언하는 데 사용됩니다.선언문 안에 있는 모든 사람들은 서로를 알고 있습니다.예를 들어 구성 요소가 있는 경우 UsernameComponent라고 하면 사용자 이름 목록이 표시되고 topperPipe라고 하면 문자열을 대문자 문자열로 변환하는 파이프가 있습니다.UsernameComponent에 대문자로 사용자 이름을 표시하려면 이전에 만든 topperPipe를 사용할 수 있지만 문제는 UsernameComponent가 topperPipe가 존재한다는 것을 어떻게 알고 있는지, 그리고 그것에 액세스하고 사용할 수 있는지입니다.선언이 나옵니다. UsernameComponent 및 topperPipe 언 할 있 니 다 습 수 선 를 ▁username 니 다 및 있 component

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

Angular와의 오랜 휴식 후에 도움이 될 수 있는 빠른 치트 시트 추가:

---

선언문

예:

declarations: [AppComponent]

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

---

수입품

예:

imports: [BrowserModule, AppRoutingModule]

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

---

공급자

예:

providers: [UserService]

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

---

부트스트랩

예:

bootstrap: [AppComponent]

여기에 무엇을 주입할 수 있습니까?이 모듈에서 생성되는 주 구성 요소(구성 요소 트리의 상위 상위 노드)

---

엔트리 구성 요소

예:

entryComponents: [PopupComponent]

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

---

내보내기

예:

export: [TextDirective, PopupComponent, BrowserModule]

여기서 주입할 수 있는 구성 요소, 지침, 모듈 또는 파이프 중 다른 모듈에서 액세스할 수 있는 것은 무엇입니까(이 모듈을 가져온 후).

각@NgModule생성자:

1. import { x } from 'y';은 표준 구문입니다ES2015/ES6모듈 구문)을 사용하여 다른 파일에서 코드를 가져옵니다.각도에 따라 달라지지 않습니다.또한 이것은 기술적으로 모듈의 일부가 아니며, 이 파일의 범위 내에서 필요한 코드를 얻기만 하면 됩니다.
2. imports: [FormsModule]여기에서 다른 모듈을 가져옵니다.를 들어, " 예를들어수다니는입합우리다니수합▁for입▁import,▁example예"FormsModule아래의 예에서.이제 양식 모듈이 이 모듈 전반에 걸쳐 제공해야 하는 기능을 사용할 수 있습니다.
3. declarations: [OnlineHeaderComponent, ReCaptcha2Directive]여기에 부품, 지침 및 파이프를 넣습니다.여기에 선언되면 이제 전체 모듈에서 사용할 수 있습니다.예를 들어 이제 다음을 사용할 수 있습니다.OnlineHeaderComponent에 시대에AppComponent뷰(view) 파일).앵글은 이걸 어디서 찾아야 할지 알고 있습니다.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 { }

1. 선언:이 속성은 이 모듈에 속하는 구성 요소, 지침 및 파이프에 대해 알려줍니다.
2. 내보내기:다른 NgModule의 구성 요소 템플릿에서 표시되고 사용할 수 있어야 하는 선언의 하위 집합입니다.
3. 가져오기:이 NgModule에 선언된 구성 요소 템플릿에서 내보낸 클래스가 필요한 다른 모듈.
4. 제공자: 이 NgModule이 글로벌 서비스 모음에 기여하는 서비스의 제작자. 앱의 모든 부분에서 액세스할 수 있습니다. (또한 구성 요소 수준에서 제공자를 지정할 수 있으며, 이는 종종 선호됩니다.)
5. 부트스트랩:루트 구성 요소라고 하는 다른 모든 응용 프로그램 보기를 호스트하는 기본 응용 프로그램 보기입니다.루트 NgModule만 부트스트랩 속성을 설정해야 합니다.

언급URL : https://stackoverflow.com/questions/39062930/what-is-the-difference-between-declarations-providers-and-import-in-ngmodule