角度2:误解与进口
我想从角度1.4端口的一些结构... ...角度2:误解与进口
我也有一些麻烦。例如,我有这样的结构:
部件 - 是一个模块,客户是一个模块,列表 - 是一个模块。
我有导入模块&组件的麻烦。
我做一个这样的方式:
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)?
请参阅this在另一个线程中回答,所以看起来在Angular 2中不可能,因为每个组件都是模块化的部分,并且需要它自己的导入,否则模块化将会丢失。
您可以让的相关详细介绍如何使用他们here as well.
是的,好吧 每个模块正在导入依赖关系。 但为什么如果我在列表模块中使用ngbModule,我需要导入它在客户,组件等? – brabertaser19
您需要将它导入到您使用的每个模块中,因为没有任何东西像“父”模块或其他东西,每个模块都有自己的依赖关系,因此需要自己的导入。 – nameless
检查我的问题...所以是真的,我需要导入ngbModule到处(组件,客户),即使我没有在应用程序视图中使用它?我在应用程序视图中仅使用列表模块 – brabertaser19
的想法Angular2模块后面的指令是,它是一个独立的可重复使用的模块。但是,这意味着无论模块需要必须由模块本身导入。
如果导入的模块是继承的,则模块不再是独立的,因此不再可重用,并且失去了模块化系统的大部分优点。
是的,确定每个模块都正在导入依赖项。但为什么如果我在列表模块中使用ngbModule,我需要将它导入客户,组件等? – brabertaser19
您应该只需将其导入任何声明组件,管道,指令等使用导入模块中的某些内容的模块。 – Robba
检查我的问题...所以是真的,我需要导入ngbModule到处(组件,客户),即使我没有在应用程序视图中使用它?我只在应用程序视图中使用列表模块 – brabertaser19
要在您的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
。我认为这有点违反直觉,并且建议只导入客户模块中的列表模块,并在组件模块内导出列表模块。
但我已经这么做了) – brabertaser19
为什么在CustomerModule中声明ListComponent?如果你想使用ListComponent,你应该在你的CustomerModule中导入ListModule。我相信这是你的问题所在。我已经更新了我的回答 – PierreDuc
好) 为什么我使用嵌套:对于我在角1.4中,例如:组件/卡/列表/项目,在一个级别上都不会将它们分开...... – brabertaser19
如果你只在'ListModule'中使用'NgbModule',那么你只需要在那里导入它。你是对的:)也许是一个很长的镜头,但是''这个额外的空间可能会成为问题吗? –
PierreDuc
@PierreDuc 似乎它没有帮助( – brabertaser19