Angular 2-多个模块中的管道重用-未找到错误或重复定义 [英] Angular 2 - Pipe reuse in multiple modules - error not found or duplicate definition

问题描述

我正在开发角度2最终版本。

我声明了两个模块：主应用，一个用于设置页面

主模块声明全局管道。此模块还包括设置模块。

app.module.ts

  @NgModule（{
 imports：[BrowserModule，HttpModule，routing，FormsModule，SettingsModule]，
声明：[ AppComponent，JsonStringifyPipe]，
引导程序：[AppComponent] 
}）
导出类AppModule {} 
  

settings.module.ts

  @NgModule（{
进口：[CommonModule，HttpModule，FormsModule，路由]，
声明：[SettingsComponent]，
出口：[SettingsComponent]，
提供者：[] 
}）
导出类SettingsModule {} 
  

尝试使用时设置模块中的管道。我收到找不到该管道的错误。

  zone.min.js？c b = bdf3d3f：1未处理的承诺拒绝：模板解析错误：
找不到管道 jsonStringify（< td> {{user.name}}< / td> 
< td> {{user.email}}< / td> 
< td> [错误->] {{用户| jsonStringify}}< / td> 
< td> {{user.registered}}< / td> 
< / tr）：ManageSettingsComponent @ 44：24;区域：< root>;任务：Promise.then;值：错误：模板解析
  

如果我将管道包含到设置模块中，它将抱怨两个模块具有相同的管道。

  zone.min.js？cb = bdf3d3f：1错误：错误：类型JsonStringifyPipe是以下两个模块的声明的一部分：SettingsModule和
   
 
 
  json-stringify.pipe.ts  
  @Pipe（{name：'jsonStringify'}）
导出类JsonStringifyPipe实现PipeTransform {
 transform（object）{
 //返回对象为字符串
返回JSON.stringify（object）; 
} 
} 
  
对此有任何想法吗？
解决方案
如果要在其他模块中使用管道，则将声明管道的模块添加到 imports：要在其中重用管道的模块的[...] ，而不是将其添加到声明中：[] 的多个模块。
 
 
 
例如：
  @NgModule（{
进口：[]，
声明：[JsonStringifyPipe]，
出口：[JsonStringifyPipe] 
}）
出口class JsonStringifyModule {} 
  
 
 
 
 
 
  @NgModule（{
进口：[
 BrowserModule，HttpModule，路由，FormsModule，SettingModule，
 JsonStringifyModule]，
声明：[AppComponent]，
引导程序：[AppComponent] 
}）
导出类AppModule {} 
  
 
 
 
 
 
  @NgModule（{ 
导入：[
 CommonModule，HttpModule，FormsModule，路由，
 JsonStringifyModule]，
声明：[SettingsComponent]，
导出：[SettingsComponent]，
提供者：[] 
}）
导出类SettingsModule {} 
  
 


Im working on angular 2 final release. 

I have declared two modules: main app and one for the settings page.

The main module is declaring globally pipes. This module is also including the settings module.

app.module.ts
@NgModule({
    imports: [BrowserModule, HttpModule, routing, FormsModule, SettingsModule],
    declarations: [AppComponent, JsonStringifyPipe],
    bootstrap: [AppComponent]
})
export class AppModule { }
settings.module.ts
@NgModule({
    imports: [CommonModule, HttpModule, FormsModule, routing],
    declarations: [SettingsComponent],
    exports: [SettingsComponent],
    providers: []
})
export class SettingsModule { }
When trying to use the pipe in the settings module I'm getting an error that the pipe could not be found.
zone.min.js?cb=bdf3d3f:1 Unhandled Promise rejection: Template parse errors:
The pipe 'jsonStringify' could not be found ("         <td>{{user.name}}</td>
                    <td>{{user.email}}</td>
                    <td>[ERROR ->]{{user | jsonStringify}}</td>
                    <td>{{ user.registered }}</td>
                </tr"): ManageSettingsComponent@44:24 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse 
If I include the pipe into the settings module it complains about the two modules having same pipe.
zone.min.js?cb=bdf3d3f:1 Error: Error: Type JsonStringifyPipe is part of the declarations of 2 modules: SettingsModule and AppModule! Please consider moving JsonStringifyPipe to a higher module that imports SettingsModule and AppModule. You can also create a new NgModule that exports and includes JsonStringifyPipe then import that NgModule in SettingsModule and AppModule.
json-stringify.pipe.ts
@Pipe({name: 'jsonStringify'})
export class JsonStringifyPipe implements PipeTransform {
    transform(object) {
        // Return object as a string
        return JSON.stringify(object);
    }
}
Any idea about this?
解决方案
If you want to use the pipe in a different module, then add the module where the pipe is declared to imports: [...] of the module where you want to re-use the pipe, instead of adding it to declarations: [] of multiple modules.

For example:
@NgModule({
    imports: [],
    declarations: [JsonStringifyPipe],
    exports: [JsonStringifyPipe]
})
export class JsonStringifyModule { }


    

@NgModule({
    imports: [
      BrowserModule, HttpModule, routing, FormsModule, SettingsModule,
      JsonStringifyModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }




@NgModule({
    imports: [
       CommonModule, HttpModule, FormsModule, routing, 
       JsonStringifyModule],
    declarations: [SettingsComponent],
    exports: [SettingsComponent],
    providers: []
})
export class SettingsModule { }


                        
这篇关于Angular 2-多个模块中的管道重用-未找到错误或重复定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！