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

Posted 2023-02-19

【中文标题】从共享文件夹导入 Angular 自定义管道时出错

【英文标题】：Error in importing a Angular custom pipe from a shared folder

【发布时间】：2021-04-01 06:52:22

【问题描述】：

我从共享文件夹创建了一个自定义管道以在组件 1（例如：申请人组件）html 中使用它，因此我将其导入到 ApplicantModule。我的目标是让这个管道在组件 2 中可重用（例如：申请人组件），所以我还将这个自定义管道导入到组件的 2 模块，即 CoApplicantModule。编译后出现控制台错误。

当我尝试将自定义管道的导入语句移动到 SharedModule 并尝试来自组件 2 的管道时，出现控制台错误。

我想寻求您的帮助，因为找不到这个错误，因为我认为它会起作用，因为 SharedModule 也被导入 ApplicantModule 和 CoApplicantModule

【参考方案1】：

您的错误表明您已在 2 个模块中声明 pipe。您在错误消息中得到了解决方案。您可以创建另一个模块，将您的pipe 添加到declarations，然后将其导出到exports，而不是通过declarations“导入”您的pipe，您只需将创建的模块导入imports。

【参考方案2】：

您不能在多个 module 中声明您的 pipe。您可以为所有自定义管道创建一个module，然后只需将其导入您需要使用它们的所有组件中。

---

我通常会创建一个目录以使事情井井有条。在本例中为 pipes 目录。

管道/管道.module.ts

import  NgModule  from '@angular/core';
import  CommonModule  from '@angular/common';
import  MyCustomPipe  from './myCustom.pipe';

@NgModule(
  declarations: [MyCustomPipe],
  imports: [
    CommonModule
  ],
  entryComponents: [MyCustomPipe],
  exports: [MyCustomPipe]
)
export class PipesModule  

---

现在，您可以在任何组件中重复使用它。例如：

pages/home/home.module.ts

...
import  PipesModule  from "../../pipes/pipes.module";
...

@NgModule(
  imports: [
    ...,
    PipesModule
  ],
  declarations: [HomePage]
)
export class HomePageModule 

现在，它们已经在这里可用了。

pages/home/home.page.html

...
<p> something | myCustomPipe </p>
...