我在使用此设置导入Pipe时遇到问题:我有一个dashboard.Module,它通过Dashboard-routing.Module与Homie.Module和Services.Module连接。
这是我的信息中心。模块
import { DashboardRoutingModule } from './dashboard-routing.module';
import { ValuesPipe } from './values-pipe.pipe';
@NgModule({
imports: [ DashboardRoutingModule, CommonModule],
providers: [ HomieService, ServiceService ],
declarations: [ DashboardComponent, ValuesPipe],
exports: [ValuesPipe],
bootstrap: [ DashboardComponent ]
})
export class DashboardModule { }
Homie。模块
import { ValuesPipe } from './../values-pipe.pipe';
@NgModule({
imports: [
CommonModule,
HomieRoutingModule,
FormsModule,
Ng2SearchPipeModule,
ValuesPipe
],
declarations: [HomieListComponent, HomieDetailComponent]
})
export class HomieModule { }
服务。模块
import { ValuesPipe } from './../values-pipe.pipe';
@NgModule({
imports: [
CommonModule,
ServiceRoutingModule,
FormsModule,
Ng2SearchPipeModule,
ValuesPipe
],
declarations: [ServiceDetailComponent, ServiceListComponent]
})
export class ServiceModule { }
错误
core.es5.js:1020 ERROR Error: Uncaught (in promise): Error: Unexpected pipe 'ValuesPipe' imported by the module 'HomieModule'. Please add a @NgModule annotation.
Error: Unexpected pipe 'ValuesPipe' imported by the module 'HomieModule'. Please add a @NgModule annotation.
当我在Homie和Service模块中声明管道时,我收到错误消息:在两个模块中声明了管道。
因此,这就是为什么我将管道移动到Dashboard.module的原因,Dashboard.module是同时连接两个(父)的模块。
最佳答案
按照设计惯例,实现的设计是错误的。
如果要共享项目模块通用的管道,组件,指令,则应使用SharedModule概念。
在您的解决方案中,您正在正确地导出管道,但是那样就无法正常工作。
完成此操作后,一旦导出common pipe(s), component(s) and directive(s)
,就必须 import that entire module from where you have exported such things to other modules where you want to use them
。因此,
1)在项目目录中的某个位置创建一个共享模块
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ValuesPipe} from './../values-pipe.pipe';
@NgModule({
imports: [ CommonModule ],
declarations: [ ValuesPipe ],
exports: [ ValuesPipe ]
})
export class SharedModule { }
2)在
Service.Module
中导入shareModuleimport { SharedModule } from '../shared/shared.module';
...
...
@NgModule({
imports: [
CommonModule,
...
SharedModule
],
declarations: [ServiceDetailComponent, ServiceListComponent]
})
export class ServiceModule { }
现在您可以在
Service Module
中使用导出的管道了。阅读有关的更多信息shareModule