web-dev-qa-db-ja.com

NgModuleの宣言、プロバイダ、インポートの違いは何ですか？

私はAngular（Angular 2 +と呼ばれることもあります）を理解しようとしていますが、次に@Moduleに出会いました。

  1. 輸入

  2. 宣言

  3. プロバイダ

フォロー中 Angularクイックスタート

angularangular-module
288
Ramesh Papaganti

Angular概念

  • importsは他のモジュールのエクスポートされた宣言を現在のモジュールで利用可能にします。
  • declarationsは、現在のモジュールからのディレクティブ（コンポーネントやパイプを含む）を、現在のモジュール内の他のディレクティブで利用できるようにすることです。ディレクティブ、コンポーネント、またはパイプのセレクターは、宣言またはインポートされた場合にのみHTMLに対して照合されます。
  • providersはサービスと値をDIに知らせることです（依存性注入）。それらはルートスコープに追加され、それらを依存関係として持つ他のサービスやディレクティブに注入されます。

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インポート用です。別のTypeScriptファイルで宣言されているTypeScriptファイルで識別子を使用するときはいつでもこれらが必要です。

Angularの@NgModule()importsとTypeScript importはまったく異なる概念です。

jDriven - TypeScriptおよびES6のインポート構文 も参照してください。

それらのほとんどは、実際にはTypeScriptでも使用されている単純なECMAScript 2015（ES6）モジュール構文です。

415
Günter Zöchbauer

imports：FormsModule、RouterModule、CommonModule、またはその他のカスタムメイドの機能モジュールのようなサポートモジュールをインポートするために使用されます。

declarations：は現在のモジュールに属するコンポーネント、ディレクティブ、パイプを宣言するために使用されます。 宣言内のすべてがお互いを知っています。 たとえば、ユーザー名のリストを表示するUsernameComponentというコンポーネントがあるとします。また、toupperPipeというパイプもあります。これは、文字列を大文字の文字列に変換します。 UsernameComponentでユーザー名を大文字で表示したい場合は、以前作成したtoupperPipeを使用できますが、toupperPipeが存在し、それをアクセスして使用する方法をUsernameComponentに認識させる方法は次のように宣言です。UsernameComponentを宣言できます。とtoupperPipe。

Providers：はモジュール内のコンポーネント、ディレクティブ、パイプに必要なサービスを注入するために使用されます。

ここで詳細を読んでください： https://angular.io/docs/ts/latest/guide/ngmodule.html

71
Godfather

コンポーネントが宣言され、モジュールがインポートされ、そしてサービスが提供されます。私が働いている例：

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

Angular @NgModule構造体：

  1. import { x } from 'y';：これは他のファイルからコードをインポートするための標準のTypeScript構文（ES2015/ES6モジュール構文）です。 これはAngular固有ではありません 。また、これは技術的にはモジュールの一部ではありません。このファイルの範囲内で必要なコードを取得するだけで十分です。
  2. imports: [FormsModule]：ここに他のモジュールをインポートします。たとえば、以下の例ではFormsModuleをインポートします。これで、Formsモジュールが提供しなければならない機能をこのモジュール全体で使用できます。
  3. declarations: [OnlineHeaderComponent, ReCaptcha2Directive]：あなたはあなたのコンポーネント、ディレクティブ、そしてパイプをここに置きます。ここで宣言されたら、モジュール全体でそれらを使用することができます。たとえば、OnlineHeaderComponentビュー（htmlファイル）でAppComponentを使用できます。 Angularは@NgModuleで宣言されているため、このOnlineHeaderComponentの場所を認識しています。
  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 { }
9
Willem van der Veen