web-dev-qa-db-ja.com

Angular2で親モジュールから子モジュールにインポートを継承

私は記述されたようなAngular2アプリを作成しました ここ 。グローバルapp.moduleによってインポートされる2つのコンポーネント（A、B）があります。私の考えは、共有モジュールをapp.moduleに含めることでした。そのため、冗長なコードですべてのモジュールを台無しにする必要はありません。たとえば、FormsModuleを使用してそれを実行します。 app.moduleでは

imports: [
    UniversalModule,
    CommonModule,
    FormsModule,
    AModule
    RouterModule.forRoot([])
],

exports: [FormsModule]

しかし、Aモジュールでは、FormsModuleが欠落しているために例外Can't bind to 'ngModel' since it isn't a known property of 'select'.が発生しました。これは、imports: [FormsModule]を使用してすべての子モジュールもFormsModuleinにインポートした場合にのみ機能します。それはまさに私が避けたいことです。

この質問 によると、子モジュールAにAppModuleをインポートしようとしました。これは機能せず、例外Exception: Call to Node module failed with error: Error: Unexpected value 'undefined' imported by the module 'AModule'

インポートを子モジュールに継承するにはどうすればよいですか？パイプにも必要です。

angularsingle-page-applicationangular2-modules
12
Lion

通常一緒に使用されるコンポーネント、ディレクティブ、パイプをエクスポートする機能モジュール（または共有モジュール）を作成し、このモジュールをこれらのいずれかを使用するモジュールにインポートするだけです。

コンポーネント、ディレクティブ、またはパイプをグローバルに使用可能にする方法はありません。それらは、使用されるすべてのモジュールのインポートに追加する必要があります。できることは、モジュールを組み合わせて、1つまたは少数のモジュールのみをインポートすることで使用できるようにすることです。

8
Günter Zöchbauer

@GünterZöchbauerが言ったように、これは共有インポートを収集する共有モジュールを使用してのみ行うことができるようです。私はこれを行うための共有モジュールを作成するためのベースとして使用した 公式ドキュメントの例 を見つけました：

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

import { ObjectKeysPipe } from './../shared/pipes/object-keys.pipe';

@NgModule({
    imports: [CommonModule],
    declarations: [
        ObjectKeysPipe
    ],
    exports: [
        CommonModule,
        FormsModule,
        ObjectKeysPipe
    ]
})
export class GlobalSharedModule{}

これは、私（ObjectKeysPipe）と、広く使用されているCommonModuleおよびFormModuleのカスタムパイプを共有します。冗長な混乱を減らすというアイデアはうまくいきました。私のアプリケーションモジュールでは、インポート/宣言の束を追加する必要はありません。代わりに、次のように共有モジュールをインポートするだけです。

import { GlobalSharedModule } from './../shared/global-shared.module';
@ngModule({
    imports: GlobalSharedModule
})
7
Lion