角2：輸入の誤解

Question

私は角度1.4から構造の一部を移植したいと思っています...

そして私はいくつかの問題があります。 - モジュールは、顧客はモジュール、リストされている - モジュールがある

コンポーネント：たとえば、私は、このような構造を有しています。

モジュール&のインポートに問題があります。

私は、このような方法でそれを実行します。

app.module

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 

import { AppComponent } from './app.component'; 

import { MaterialModule } from '@angular/material'; 
import 'hammerjs'; 

import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; 

import { ComponentsModule } from './components/components.module'; 
import { CoreModule } from './core/core.module'; 
import { ServicesModule } from './services/services.module'; 

@NgModule({ 
    declarations: [ 
    AppComponent 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    MaterialModule.forRoot(), 
    ComponentsModule, 
    CoreModule, 
    ServicesModule, 
    NgbModule.forRoot() 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

app.component.html

<customer-list></customer-list> 

を、私はここにangular2ブートストラップを使用する場合：

<ngb-accordion #acc="ngbAccordion" activeIds="ngb-panel-0"> 
    <ngb-panel title="Simple"> 
    <template ngbPanelContent> 
     demo 
    </template> 
    </ngb-panel> 
</ngb-accordion> 

すべては問題ありません。

components.module

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

import { CustomerModule } from './customer/customer.module'; 

@NgModule({ 
    imports: [ 
    CommonModule 
    ], 
    declarations: [], 
    exports: [CustomerModule] 
}) 
export class ComponentsModule { } 

customer.module

import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { CustomerComponent } from './customer.component'; 
import { ListComponent } from './list/list.component'; 
import { ItemComponent } from './list/item/item.component'; 

@NgModule({ 
    imports: [ 
    CommonModule 
    ], 
    declarations: [CustomerComponent, ListComponent, ItemComponent], 
    exports: [CustomerComponent, ListComponent] 
}) 
export class CustomerModule { } 

list.module

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

import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; 

import { CommonModule } from '@angular/common'; 
import { ListComponent } from './list.component'; 
import { ItemComponent } from './item/item.component'; 

@NgModule({ 
    imports: [ 
    CommonModule, 
    NgbModule 
    ], 
    declarations: [ListComponent, ItemComponent], 
    exports: [ListComponent] 
}) 
export class CustomerModule { } 

list.component.html

<ngb-accordion #acc="ngbAccordion"> 
    <ngb-panel > 
     <template ngbPanelContent> 
     test 
     </template> 
    </ngb-panel> 
    </ngb-accordion> 

そして、ここでは、私はエラーを取得：

zone.js:388Unhandled Promise rejection: Template parse errors: 'ngb-panel' is not a known element:

しかし、私はapp.module達するまで、私は、すべてのモジュールでNgbModuleをインポートする場合 - すべてがうまくあります。しかし、これはばかげている。

角度2のモジュールのインポートを整理する可能性はありますか？ルートにインポートされたすべてのモジュールでインポートする必要はありません。ネストしたモジュールで再利用できます角度1.4（ngInjectを使用）？

Answer 1

別のスレッドではthis答えを参照してください。そうでなければ、モジュール性が失われるため、すべてのコンポーネントがモジュール化され、独自のインポートが必要なため、Angular 2では不可能です。

あなたはAngular2内のモジュールの後ろhere as well.

Answer 2

のアイデアをそれらを使用する方法について説明しdetailledしていることができますが、それは、スタンドアロン再利用可能なモジュールであるということです。しかし、これは、モジュールが必要とするものはどれも、はをモジュール自体でインポートする必要があることを意味します。

インポートされたモジュールが継承された場合、モジュールはスタンドアロンではなくなり、もはや再利用できなくなり、モジュラーシステムの利点のほとんどを失います。

Answer 3

ListModuleの中にNgbModuleを使用するには、それをインポート配列に追加する必要があります。ただし、AppModuleにもインポートする必要があります。だから2つの場所にしかない。あなたはそれを使用するモジュール、およびルートモジュールもこれでforRoot()輸入は輸入BrowserModule：

のみ関連するコード：AppModule

@NgModule({ 
... 
    imports: [ 
    BrowserModule, 
    NgbModule.forRoot() 
    ] 
... 
}) 
export class AppModule {} 

のみ関連するコード：ListModule：

@NgModule({ 
    imports: [ 
    CommonModule, 
    NgbModule 
    ], 
    declarations : [ 
    ListComponent, 
    ItemComponent 
    ], 
    exports : [ 
    ListComponent, 
    ItemComponent 
    ] 
}) 
export class ListModule{} 
//you named this CustomerModule for some reason.... 
//could also be the problem, or just a wrong copy paste :) 

CustomerModuleの中にListComponentを使用する場合は、ListComponentではなくListModuleをインポートする必要があります。

@NgModule({ 
    imports: [ 
    CommonModule, 
    ListModule 
    ], 
    declarations: [CustomerComponent], 
    exports: [CustomerComponent] 
}) 
export class CustomerModule {} 

だけListComponentをインポートする場合、それはNgbModuleあなたListModuleにインポート表示されません。経験則では、そのモジュールに属するコンポーネントだけをインポート/宣言します。コンポーネント/ディレクティブ/パイプ/サービスを他のモジュールからインポート/宣言しないでください。モジュール全体をインポートするだけです。ただし、一方のモジュールを他方のモジュールにエクスポートすることはできます。このようにして、別のモジュールをエクスポートしたモジュールをインポートすると、他のモジュールも使用できます。 （これは意味をなさない）。私はあなたのためにそれを書き留めてみましょう：

コンポーネントモジュールのみ輸出顧客モジュール

@NgModule({ 
    exports : [ 
     CustomerModule 
    ] 
}) 
export class ComponentsModule{} 

カスタマー・モジュールのインポートとエクスポートリストモジュール

@NgModule({ 
    imports : [ 
    ListModule 
    ], 
    exports : [ 
    ListModule 
    ] 
}) 
export class CustomerModule{} 

Listモジュールのエクスポートリストコンポーネント

@NgModule({ 
    imports : [ 
    NgbModule 
    ], 
    declarations: [ 
    ListComponent 
    ], 
    exports : [ 
    ListComponent 
    ] 
}) 
export class ListModule{} 

アプリケーションモジュールは、私の知る限りでは

@NgModule({ 
    imports : [ 
    BrowserModule, 
    NgbModule.forRoot() 
    ComponentsModule 
    ] 
}) 
export class AppModule{} 

部品モジュールをインポートし、あなたが今、あなたのAppModule内ListComponentを使用することができます。顧客モジュールもListModuleをエクスポートするためです。私はこれが少し直観的ではないと思います。そして、顧客モジュール内のリストモジュールをインポートし、コンポーネントモジュール内のリストモジュールをエクスポートするだけです。