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 bootstrap：

<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：模板解析错误：＆＃39; NGB面板＆＃39;不是一个已知元素：

但是如果我在每个模块中导入NgbModule，直到我到达app.module - 一切都很好。但这太荒谬了。

是否有可能组织角度2的模块导入，因此，我不需要在每个模块中导入它们，一旦在root中导入 - 我可以在嵌套模块中重用它们，就像它一样在角度1.4（使用ngInject）？

Answer 1

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

导入组件模块的应用程序模块

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

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

Answer 2

请参阅另一个帖子中的this答案，因此在Angular 2中似乎不可能，因为每个组件都是模块化部件并且需要它自己的导入，因为否则模块化会迷路了。

您可以获得有关如何使用它们的详细说明here as well.

Answer 3

Angular2中模块背后的想法是它是一个独立的可重用模块。但这意味着无论模块需要必须都要由模块本身导入。

如果导入的模块是继承的，则模块不再是独立模块，因此不再可重复使用，并且您将失去模块化系统的大部分优势。

Angular 2：对进口的误解

3 个答案: