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

发布时间：2020-12-17 18:01:29 所属栏目：安全来源：网络整理

导读：使用此设置导入管道时遇到问题：我有一个dashboard.Module,通过Dashboard-routing.Module连接Homie.Module和Services.Module 这是我的Dashboard.Module import { DashboardRoutingModule } from './dashboard-routing.module'; import { ValuesPipe } from '

使用此设置导入管道时遇到问题：我有一个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,这是与两者(父)连接的模块.

解决方法

按设计惯例实施设计是错误的.
如果要共享项目模块通用的管道,组件,指令,则应使用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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!