[英]Call one component in various components. Angular 4
Hello im using Angular 4. I have a component with some html that i want it to be showned in various components. 您好,我使用Angular4。我有一个带有一些html的组件,希望将其显示在各个组件中。 But when i import my module into various others moduels it says that it only can be defined in one module... how can i make it work? 但是,当我将我的模块导入其他各种模块时,它说只能在一个模块中定义...我如何使它工作?
i want param-var to be showned in globales and resumen. 我希望param-var在全局变量中显示并恢复。
Console Error 控制台错误
ERROR Error: Uncaught (in promise): Error: Type ParamVarComponent is part of the declarations of 2 modules: GlobalesModule and ResumenModule! 错误错误:未捕获(承诺):错误:类型ParamVarComponent是以下两个模块的声明的一部分:GlobalesModule和ResumenModule! Please consider moving ParamVarComponent to a higher module that imports GlobalesModule and ResumenModule. 请考虑将ParamVarComponent移至导入GlobalesModule和ResumenModule的更高模块。 You can also create a new NgModule that exports and includes ParamVarComponent then import that NgModule in GlobalesModule and ResumenModule. 您还可以创建一个新的NgModule,该导出并包含ParamVarComponent,然后在GlobalesModule和ResumenModule中导入该NgModule。
PARAM VAR MODULE 参数VAR模块
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ParamVarRoutingModule } from './param-var-routing.module';
import { ParamVarComponent } from './param-var.component';
import { FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
imports: [
CommonModule,
ParamVarRoutingModule,
FormsModule,
ReactiveFormsModule
],
declarations: [ParamVarComponent,
]
})
export class ParamVarModule { }
GLOBALES MODULE 全球模块
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { GlobalesRoutingModule } from './globales-routing.module';
import { GlobalesComponent } from './globales.component';
import {ParamVarComponent} from '../param-var/param-var.component';
import { FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
imports: [
CommonModule,
GlobalesRoutingModule,
FormsModule,
ReactiveFormsModule,
],
declarations: [GlobalesComponent,ParamVarComponent,
]
})
export class GlobalesModule { }
RESUMEN MODULE 简历模块
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ResumenRoutingModule } from './resumen-routing.module';
import { ResumenComponent } from './resumen.component';
import { FormsModule, ReactiveFormsModule} from '@angular/forms';
import {ParamVarComponent} from '../param-var/param-var.component';
@NgModule({
imports: [
CommonModule,
ResumenRoutingModule,
FormsModule,
ReactiveFormsModule,
],
declarations: [ResumenComponent,ParamVarComponent,
]
})
export class ResumenModule { }
Create new SharedModule
(or any other name, but that one matches Angular's Style Guide). 创建新的SharedModule
(或任何其他名称,但要与Angular的样式指南匹配)。 Declare and export your ParamVarComponent
there. 在ParamVarComponent
声明并导出您的ParamVarComponent
。 Now you can import SharedModule
in any other module in your application as many times as you want. 现在,您可以根据需要多次在应用程序的任何其他模块中导入SharedModule
。 Since ParamVarComponent
is exported, you can use it inside of other modules as soon as those modules import SharedModule
. 由于已导出ParamVarComponent
,因此只要这些模块导入SharedModule
,便可以在其他模块中使用它。
@NgModule({
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule
],
declarations: [ParamVarComponent],
exports: [ParamVarComponent]
})
export class SharedModule { }
@NgModule({
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
SharedModule
]
})
export class OtherModule#{ }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.