angular – 由模块’HomieModule’导入的意外管道’ValuesPipe’

前端之家收集整理的这篇文章主要介绍了angular – 由模块’HomieModule’导入的意外管道’ValuesPipe’前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
使用此设置导入管道时遇到问题:我有一个dashboard.Module,通过Dashboard-routing.Module连接Homie.Module和Services.Module

这是我的Dashboard.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.Module

import { ValuesPipe } from './../values-pipe.pipe';

@NgModule({
  imports: [
    CommonModule,HomieRoutingModule,FormsModule,Ng2SearchPipeModule,ValuesPipe
  ],declarations: [HomieListComponent,HomieDetailComponent]
})
export class HomieModule { }

Service.Module

import { ValuesPipe } from './../values-pipe.pipe';

@NgModule({
  imports: [
    CommonModule,ServiceRoutingModule,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,这是与两者(父)连接的模块.

解决方法

@H_502_39@ 按设计惯例实施设计是错误的.
如果要共享项目模块通用的管道,组件,指令,则应使用SharedModule概念.

在您的解决方案中,您正在正确地导出管道,但就这样它不起作用.

在这样做之后导出公共管道,组件和指令之后,必须将整个模块从导出这些东西的位置导入到要使用它们的其他模块.所以关注,

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中导入shareModule

import { SharedModule } from '../shared/shared.module';
...
...

@NgModule({
  imports: [
    CommonModule,...
    SharedModule
  ],ServiceListComponent]
})
export class ServiceModule { }

现在您已准备好在服务模块中使用导出的管道.

阅读更多关于shareModule

猜你在找的Angularjs相关文章