Угловое 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:

Но если я импортировать NgbModule в каждом модуле, пока не достигнет app.module - все нормально. Но это смешно.

Есть ли возможность организовать импорт модулей в угловом 2, так что мне не нужно импортировать их в каждый модуль, после импорта в корневой - я могу повторно использовать их во вложенных модулях, как это было в угловой 1,4 (с использованием ngInject)?

Answer 1

См. this Ответ в другой теме, поэтому кажется, что в Angular 2 это невозможно, поскольку каждый компонент является модульным элементом и нуждается в собственном импорте, потому что в противном случае модульность будет потеряна.

Вы можете иметь Детальные инструкции о том, как использовать их here as well.

Answer 2

Идея позади модуля в Angular2, что это автономный многоразовые модуль. Однако это означает, что независимо от того, что требуется модулю , необходимо, чтобы был импортирован самим модулем.

Если импортированные модули унаследованы, модули больше не являются автономными и, следовательно, больше не могут использоваться повторно, и вы теряете большую часть преимуществ модульной системы.

Answer 3

Чтобы использовать NgbModule внутри вашего ListModule, вы должны добавить его в массив импорта, как и вы. Но вы также должны импортировать его в свой AppModule. Так что только в двух местах. Модуль, где вы используете его, и 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 :) 

Если вы затем захотите использовать ListComponent внутри своего CustomerModule, вам следует импортировать ListModule, а не ListComponent.

@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{} 

модуль Список экспорта список компонентов

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

App модуль импорта модуля компонентов

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

Насколько я знаю, теперь вы будете иметь возможность использовать ListComponent внутри AppModule. Поскольку модуль клиента также экспортирует ListModule. Я думаю, что это немного противоречит интуиции, и я бы посоветовал только импортировать модуль списка внутри модуля клиента и экспортировать модуль списка внутри модуля компонентов.