angular - Angular 2:对进口的误解

我想把一些结构从角度1.4…
我也有一些麻烦。例如，我有这样的结构：

组件-是一个模块，客户是一个模块，列表-是一个模块。
我在导入模块和组件时遇到问题。
我是这样做的：
应用程序模块

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>

一切都好。
组件.模块

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

客户模块

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

列表模块

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>

这里我得到了错误：
js:388未处理的承诺拒绝：模板分析错误：
“NGB面板”不是已知元素：
但是如果我在每个模块中导入NgbModule，直到到达app.module-一切都很好。但这太荒谬了。
有没有可能，在angular 2中组织模块的导入，这样，我就不需要在每个模块中导入它们，一旦导入到根目录中，我就可以在嵌套模块中重用它们，就像在angular 1.4中一样（使用nginject）？

最佳答案

要在NgbModule中使用ListModule，应该像以前那样将其添加到imports数组中。但您也应该将其导入到AppModule中。所以只有两个地方。使用它的模块，以及根模块上的导入，根模块还导入forRoot()：
仅相关代码：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 :)

如果要在BrowserModule中使用ListComponent，则应导入CustomerModule而不是ListModule。

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

如果您只导入ListComponent，它将看不到您在ListComponent中导入的NgbModule。经验法则，只导入/声明属于该模块的组件。不要从其他模块导入/声明组件/指令/管道/服务。只导入整个模块。但是，您可以在另一个模块中导出一个模块。这样，如果导入导出另一个模块的模块，则另一个模块也可用。（这没什么意义）。让我给你写下来：
组件模块仅导出客户模块

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

据我所知，您现在可以使用ListModule中的ListComponent。因为customer模块还导出AppModule。我认为这有点违反直觉，建议只在客户模块中导入列表模块，在组件模块中导出列表模块。