angular2 NgModel モジュールの詳細な紹介

この記事では、angular2 NgModel モジュールについて詳しく説明します。これには一定の参考値があります。必要な友人は参照してください。お役に立てば幸いです。

angular2 NgModel モジュール

Angular2 では、Module は @NgModule で修飾されたクラスを参照します。 @NgModule はメタデータ オブジェクトを使用して、Angular にコードのコンパイル方法と実行方法を指示します。モジュールには内部にコンポーネント、命令、パイプを含めることができ、それらのアクセス権をパブリックとして宣言して、外部モジュールのコンポーネントがそれらにアクセスして使用できるようにすることができます。サブモジュールを定義してアプリケーションの機能を拡張することもできます。

NgModule の API

interface NgModule {
     // providers: 这个选项是一个数组,需要我们列出我们这个模块的一些需要共用的服务
     //            然后我们就可以在这个模块的各个组件中通过依赖注入使用了.
    providers : Provider[]
     // declarations: 数组类型的选项, 用来声明属于这个模块的指令,管道等等.
     //               然后我们就可以在这个模块中使用它们了.
    declarations : Array<type>|any[]>
     // imports: 数组类型的选项,我们的模块需要依赖的一些其他的模块,这样做的目的使我们这个模块
     //          可以直接使用别的模块提供的一些指令,组件等等.
    imports : Array<type>|ModuleWithProviders|any[]>
     // exports: 数组类型的选项,我们这个模块需要导出的一些组件,指令,模块等;
     //          如果别的模块导入了我们这个模块,
     //          那么别的模块就可以直接使用我们在这里导出的组件,指令模块等.
    exports : Array<type>|any[]>
    // entryComponents: 数组类型的选项,指定一系列的组件,这些组件将会在这个模块定义的时候进行编译
    //                  Angular会为每一个组件创建一个ComponentFactory然后把它存储在ComponentFactoryResolver
    entryComponents : Array<type>|any[]>
    // bootstrap: 数组类型选项, 指定了这个模块启动的时候应该启动的组件.当然这些组件会被自动的加入到entryComponents中去
    bootstrap : Array<type>|any[]>
    // schemas: 不属于Angular的组件或者指令的元素或者属性都需要在这里进行声明.
    schemas : Array<schemametadata>
    // id: 字符串类型的选项,模块的隐藏ID,它可以是一个名字或者一个路径;用来在getModuleFactory区别模块,如果这个属性是undefined
    //     那么这个模块将不会被注册.
    id : string
 }</schemametadata></type></type></type></type></type>

よく使われる API の紹介

NgModule の主な属性は次のとおりです:

宣言: 内部のコンポーネント/ディレクティブ/パイプのリストモジュール、宣言 対応するコンポーネントを使用する前に、このモジュールの内部メンバーを確認して宣言してください。

providers: アプリケーションのルート レベルで使用する必要があるサービスを指定します。 (Angular2 にはモジュールレベルのサービスはなく、NgModule で宣言されたすべてのプロバイダーはルートレベルの依存関係インジェクターに登録されます)

imports: 他のモジュール、および他のモジュールによって公開されているコンポーネント、ディレクティブ、およびパイプをインポートします。このモジュールのコンポーネントにはモジュールなどが使用できます。たとえば、CommonModule をインポートした後、NgIf、NgFor などの命令を使用できます。

exports: どの内部メンバーを外部使用に公開するかを制御するために使用されます。モジュールをインポートしても、そのモジュール内でインポートされたモジュールによって公開されるパブリック メンバーが自動的にインポートされるわけではありません。ただし、インポートされたモジュールが内部的にインポートされたモジュールをエクスポートに書き込む場合は除きます。

ブートストラップ: 通常、アプリ起動のルート コンポーネント。通常、コンポーネントは 1 つだけあります。ブートストラップ内のコンポーネントは自動的にentryComponentsに配置されます。

entryCompoenents: テンプレート内で参照されないコンポーネント。この属性は通常、ng 自体、通常はブートストラップ コンポーネントまたはルーティング コンポーネントによってのみ使用され、ng はブートストラップ コンポーネントとルーティング コンポーネントを自動的に配置します。この属性は、コンポーネントがルーティングなしで dom に動的に追加されない限り使用されません。

サブモジュール

プログラムが成長するにつれて、単一のルート モジュールでは役割を明確に分割できなくなります。この時点で、フィーチャー モジュールを導入できます。機能モジュールはルート モジュールと同じ方法で作成され、すべてのモジュールがランタイム コンテキストと依存関係インジェクターを共有します。

機能モジュールとルート モジュールの役割の主な違いは、次の 2 点です。

ルート モジュールの目的はアプリを開始することであり、機能モジュールの目的はアプリを起動することです。モジュールはアプリを拡張します。

関数モジュールは、必要に応じて特定の実装を公開または非表示にすることができます。

Angular2 が提供するもう 1 つのモジュール関連テクノロジは、遅延読み込みです。 Angular2 では、アプリケーションのスムーズさを向上させるために、デフォルトですべてのコードが 1 つのファイルにパッケージ化されますが、モバイルで実行されるアプリの場合、大きなファイルの読み込みが遅すぎる可能性があるため、rc5 では遅延読み込み方式が提供されています。

import { ModuleWithProviders }  from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

export const routes: Routes = [
  { path: '', redirectTo: 'contact', pathMatch: 'full'},
  { path: 'crisis', loadChildren: 'app/crisis/crisis.module#CrisisModule' }, // 可以延迟加载子模块，子模块的结构和父模块一样，它会去加载子模块中的Routes配置，并跳转对应的组件中去。
  { path: 'heroes', loadChildren: 'app/hero/hero.module#HeroModule' }
];

export const routing: ModuleWithProviders = RouterModule.forRoot(routes);

このうち、path はパスを指定し、loadChildren は遅延読み込みの使用を指定し、'app/crisis/crisis.module#CrisisModule' はモジュールのパスとモジュールの名前を指定します。

【関連する推奨事項: angular ビデオ チュートリアル ]

以上がangular2 NgModel モジュールの詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。