Angular 2 - 多个模块中的管道重用 - 未找到错误或重复定义

Posted

技术标签:

【中文标题】Angular 2 - 多个模块中的管道重用 - 未找到错误或重复定义【英文标题】:Angular 2 - Pipe reuse in multiple modules - error not found or duplicate definition 【发布时间】:2017-02-22 05:26:39 【问题描述】:

我正在开发 Angular 2 最终版本。

我已经声明了两个模块主应用程序和一个用于设置页面

主模块正在声明全局管道。该模块还包括设置模块

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  

当尝试在设置模块中使用管道时,我收到一个错误,提示找不到管道。

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 

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

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);
    

对此有什么想法吗?

【问题讨论】:

【参考方案1】:

如果您想在不同的模块中使用管道,则将声明管道的模块添加到您要重复使用管道的模块的imports: [...],而不是将其添加到declarations: []多个模块。

例如:

@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  

【讨论】:

感谢您的回答... 为什么我需要为管道创建一个模块?为什么在全局模块中定义管道不足以使管道对其他模块可用? 为什么是个好问题。因为 Angular2 就是这样设计的。我想这没有多大帮助;-)。引入NgModule 概念是为了使延迟加载与离线模板编译一起工作,我想他们有充分的理由以这种方式设计它。 Angular 只需要知道组件、指令、管道和服务的使用位置,就能够创建适用于延迟加载和离线编译的小而高效的代码。 您不需要为每个管道创建一个模块。您可以在这样的模块中放置尽可能多的可重用组件、指令、管道和服务。但是您需要在使用这些部件之一的任何地方导入它。 我认为我只是混淆了您可以在组件和模块中执行的操作。组件似乎有一个层次结构——注册为组件提供者的服务可以被其他组件继承。这不适用于模块。就我而言, app.module 和 settings.module 是独立的模块。 App.module 只知道来自 settings.module 的导出。 Settings.module 不知道 App.module。希望我能正确理解。 听起来你明白了 ;-)

以上是关于Angular 2 - 多个模块中的管道重用 - 未找到错误或重复定义的主要内容,如果未能解决你的问题,请参考以下文章

从共享文件夹导入 Angular 自定义管道时出错

Angular - 跨多个模块使用组件

如何重用 Angular 测试文件中的所有导入

在其他应用程序中重用 Angular 2 模块而不发布到 npm?

Angular 可重用模块和组件

Angular2:多个模块中的一个模块实例