如何从 Angular2 中的另一个模块继承模块?
How to inherit a module from another module in Angular2?
所以我正在使用 Angular 2 final (2.0.0) 假设我创建了一个 WidgetsModule,其中包含一堆指令和组件,它们将帮助我构建我的应用程序,然后将其导入我的应用模块
import { NgModule } from '@angular/core';
import { UniversalModule } from 'angular2-universal';
import { WidgetsModule } from '../../../widgets';
import { App, appRouting } from './';
@NgModule({
imports: [
UniversalModule,
WidgetsModule,
appRouting
],
providers: [ AppPresenter ],
declarations: [ App ],
exports: [ ],
bootstrap: [ App ]
})
export class AppModule { }
然后我想在子模块中使用小部件,例如 HomeModule、CartModule 等。如何才能使这些小部件可用而不必在每个其他模块中导入 WidgetsModule?
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms'
import { WidgetsModule } from '../../../widgets';
import { Cart, cartRouting } from './';
@NgModule({
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
WidgetsModule, //<-- I want to avoid doing this in every module
cartRouting
],
providers: [ ],
declarations: [ Cart ]
})
export class CartModule { }
有没有办法像使用 exports[] 中的指令一样完成它?
我认为实际上不需要,因为 WidgetsModule 与 FormsModule (@angular/forms) 相同。 WidgetsModule 是angular 提供的用户自定义模块和FormsModule。这是唯一的区别。这两个模块都用于执行某些功能。
所以想想 我们如何声明 FormsModule 一次并在所有其他模块 中使用它,如果你理解那么问题已解决
只需浏览以下内容link
它直接需要访问它自己的 WidgetsModule
就像它需要直接访问它自己的 FormsModule
一样(一个或另一个)。不过,清理它的一种方法是 导出 所有在多个地方使用的模块,来自 SharedModule
。然后你可以到处导入 SharedModule
@NgModule({
exports: [
FormsModule,
CommonModule,
WidgetsModule
]
})
class SharedModule {}
你不需要 imports
将它们中的任何一个放入 SharedModule
除非你在 SharedModule
中声明一个使用任何其他模块的组件。
然后在所有其他模块中,只有 imports
SharedModule
。这最终清理了很多,你只需要维护一个共享模块。
另请参阅:
Modules do not inherit access to the components, directives or pipes that are declared in other modules. What AppModule imports is irrelevant to ContactModule and vice versa. Before ContactComponent can bind with [(ngModel)], its ContactModule must import FormsModule.
所以我正在使用 Angular 2 final (2.0.0) 假设我创建了一个 WidgetsModule,其中包含一堆指令和组件,它们将帮助我构建我的应用程序,然后将其导入我的应用模块
import { NgModule } from '@angular/core';
import { UniversalModule } from 'angular2-universal';
import { WidgetsModule } from '../../../widgets';
import { App, appRouting } from './';
@NgModule({
imports: [
UniversalModule,
WidgetsModule,
appRouting
],
providers: [ AppPresenter ],
declarations: [ App ],
exports: [ ],
bootstrap: [ App ]
})
export class AppModule { }
然后我想在子模块中使用小部件,例如 HomeModule、CartModule 等。如何才能使这些小部件可用而不必在每个其他模块中导入 WidgetsModule?
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms'
import { WidgetsModule } from '../../../widgets';
import { Cart, cartRouting } from './';
@NgModule({
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
WidgetsModule, //<-- I want to avoid doing this in every module
cartRouting
],
providers: [ ],
declarations: [ Cart ]
})
export class CartModule { }
有没有办法像使用 exports[] 中的指令一样完成它?
我认为实际上不需要,因为 WidgetsModule 与 FormsModule (@angular/forms) 相同。 WidgetsModule 是angular 提供的用户自定义模块和FormsModule。这是唯一的区别。这两个模块都用于执行某些功能。
所以想想 我们如何声明 FormsModule 一次并在所有其他模块 中使用它,如果你理解那么问题已解决
只需浏览以下内容link
它直接需要访问它自己的 WidgetsModule
就像它需要直接访问它自己的 FormsModule
一样(一个或另一个)。不过,清理它的一种方法是 导出 所有在多个地方使用的模块,来自 SharedModule
。然后你可以到处导入 SharedModule
@NgModule({
exports: [
FormsModule,
CommonModule,
WidgetsModule
]
})
class SharedModule {}
你不需要 imports
将它们中的任何一个放入 SharedModule
除非你在 SharedModule
中声明一个使用任何其他模块的组件。
然后在所有其他模块中,只有 imports
SharedModule
。这最终清理了很多,你只需要维护一个共享模块。
另请参阅:
Modules do not inherit access to the components, directives or pipes that are declared in other modules. What AppModule imports is irrelevant to ContactModule and vice versa. Before ContactComponent can bind with [(ngModel)], its ContactModule must import FormsModule.