web-dev-qa-db-ja.com

Angular 2+ ngModuleでのインポート/エクスポートの役割

私はAngular 2+を学習していますが、ngModuleでのインポート/エクスポートの役割を理解するのに苦労しています。より具体的には、ES6構文を使用してモジュールをインポートする場合、モジュールをインポートすることが重要である理由

import { BrowserModule } from '@angular/platform-browser';
@NgModule({
  imports:      [ BrowserModule ],
  providers:    [ Logger ],
  declarations: [ AppComponent ],
  exports:      [ AppComponent ]
})

モジュールがes6構文を介してインポートされたことを検出するのはそれほど簡単ではありませんでしたか？

imports-エクスポートされたクラスがこのモジュールで宣言されたコンポーネントテンプレートに必要な他のモジュール。

しかし、私たちはすでにコンポーネントレベルでそれらをインポートしています。何か不足していますか？また、この構文を採用した理由の例を探しています。

angularangular-module
42
Doua Beri

混乱は、AngularとES6の両方が同じ用語を使用しているという事実から生じています...

ES6/TypeScriptの場合：

  • moduleはプロジェクト内の任意のコードファイルです。
  • importは、importキーワードで始まる行です。
  • exportは、exportキーワードで始まる行です。

角度：

  • moduleは@NgModuleで装飾されたクラスです。アプリケーションのすべてのコンポーネント、パイプ、ディレクティブ、およびプロバイダーのレジストリ（コンテナー）として機能します。
  • importは、@NgModuleデコレータのimportsプロパティに入れるものです。 Angularモジュールが別のAngularモジュールで定義された機能を使用できるようにします。
  • export置くものは、@NgModuleデコレータのexportsプロパティです。 Angularモジュールを使用して、そのコンポーネント/ディレクティブ/パイプの一部をアプリケーション内の他のモジュールに公開できます。これがないと、モジュールで定義されたコンポーネント/ディレクティブ/パイプは、そのモジュールでのみ使用できます。

ES6モジュール/インポート/エクスポートは非常に低レベルです。 constやlet...などのキーワードと同様に、これらはES6言語の機能です。ES6/ TypeScriptでは、各ファイルにITS OWN SCOPEがあります。そのため、ファイルでクラス/関数/変数を使用する必要があり、そのクラス/関数/変数が別のファイルで定義されている場合は、必ずインポートする必要があります（定義されているファイルでエクスポートする必要があるということです）。これは、Angularに固有のものではありません。 ES6で作成されたすべてのプロジェクトは、この方法でモジュール/インポート/エクスポートを使用できます。

一方、Angularのモジュール/インポート/エクスポートはAngularフレームワークの機能です。 Angularの世界でのみ意味があります。他のJavaScriptフレームワークにも同様の概念がありますが、異なる構文を使用します。

今、2つの間にいくつかの重複があります。たとえば、@NgModule.imports（Angular world）でシンボルを使用するには、モジュールが定義されているTypeScriptファイル（ES6/TypeScript world）のシンボルをimportする必要があります。

// ES6/TypeScript Imports
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

@NgModule({
  // Angular Imports
  imports: [ BrowserModule ]
})

しかし、上記の定義を注意深く読むと、2つのことは実際にはまったく異なることがわかります。 1つは言語、もう1つはフレームワークです。

63
AngularChef
import { BrowserModule } from '@angular/platform-browser';

ファイルをメモリにロードします。

@NgModule({
    imports:      [ BrowserModule ],

browserModuleをAngularに登録します。

15
Ynot