角2/4：NgModuleでクラスをカプセル化することは可能ですか？

Question

私はモジュールにいくつかのクラスを含めたいので、モジュールを別のパッケージとしてインポートし、それらのクラスを使用することができます。ここで小さな例です：

human.ts（私のクラスファイル）

export class Human { 

    private numOfLegs: Number; 

    constructor() { 
    this.numOfLegs = 2; 
    } 
} 

test.module.ts（私のモジュールファイル）

import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 

import { Human } from './human'; 

@NgModule({ 
    imports: [CommonModule], 
    declarations: [ 
    Human 
    ], 
    providers: [], 
    exports: [Human] 
}) 
export class TestModule {} 

方法コンポーネント内のHumanクラスをインスタンス化するのですか？ 私は両方を試してみた：

import { TestModule } from './test.module'; 

と

import { Human } from './test.module'; 

しかし、私はnew Human()をすれば、私はまだcannot find name Human

Answer 1

角度モジュールとES6 /タイプスクリプト/ノードモジュールは異なります。角度モジュールは、コンポーネント、サービス、および指令の集合です。 ES6モジュールはほとんどの場合、クラスで構成されています。

他の非角度クラスに依存するNgModuleを再利用する場合は、それらをES6モジュールとしてエクスポートして別の場所で使用できます。 export.tsまたはindex.tsのようなファイルを持っているし、そこに次のエクスポート文を置く -

export { TestModule } from './test.module'; 
export { Human } from './human'; 

を今、あなたはどこかNgModuleを使用したい場合、あなたは次のようなコマンドでそれをインポート -

import { TestModule } from '../lib/export'; 

Answer 2

ヒューマンクラスの注射を作成し、テストのプロバイダセクションでそれを宣言しますモジュール。

アプリケーションモジュール（ルートモジュール）がテストモジュールを熱心に読み込むと、テストモジュールで宣言されたプロバイダがアプリケーションモジュールで利用できるようになり、ルートモジュールからコンポーネントにHumanを注入できます。

テストモジュールを遅延ロードすると状況が異なります。これらは独自のインジェクタを持ち、プロバイダを他のモジュールと共有しません。

@NgModule({ 
    imports: [CommonModule], 
    providers: [Human] 
}) 
export class TestModule {} 

私はあなたのルータの設定を使用してTestModuleをロードしていることを前提としていますAppComponentで

@NgModule({ 
    imports: [ BrowserModule, TestModule, 
    RouterModule.forRoot([ 
     {path: 'test', loadChildren: TestModule}, 
    ) 
    ], 
    bootstrap: [ AppComponent ] 
}) 

あなたが人間を注入することができます

export class AppComponent { 

    constructor(human: Human) { 
    console.log(human.numOfLegs); 
    } 
} 

がnumOfLegsが公開されていることを確認します。

Answer 3

クラスはdeclarationsまたはexportsで指定しないでください。これらはコンポーネントディレクティブおよびパイプ用です。Humanに間違いがあります。

最初のオプションは、Humanがモジュール内で値プロバイダ（クラスプロバイダではない）として提供されるため、手動でインスタンス化する必要があります。このオプションは、クラスが非DI引数を受け入れる場合に優先されます。

@NgModule({ 
    providers: [{ provide: Human, useValue: Human }] 
}) 
export class TestModule {} 

... 

import { Human } from '...'; 

@Component(...) 
class SomeComponent { 
    constructor(@Inject(Human) Human: typeof Human) { 
    this.human = new Human(); 
    } 
} 

第2の選択肢は、Humanをコンポーネントプロバイダにすることです。各コンポーネントインスタンスに対してインスタンス化されます。この場合、TestModuleは冗長です。このオプションは、一般的に好ましい：どちらの場合も

import { Human } from '...'; 

@Component({ providers: [Human], ... }) 
class SomeComponent { 
    constructor(public human: Human) {} 
} 

をHuman DIトークンは、それが使われているコンポーネントファイルにインポートする必要があります。