角度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

要在您的ListModule中使用NgbModule，您应该像将它添加到imports数组中。但你也应该将它导入你的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 :) 

如果您希望在CustomerModule中使用ListComponent，则应该导入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{} 

应用模块导入组件模块

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

据我所知，你现在就可以使用您的ListComponent里面AppModule。因为客户模块也出口ListModule。我认为这有点违反直觉，并且建议只导入客户模块中的列表模块，并在组件模块内导出列表模块。