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

Question

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

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

我想请求你的帮助，因为找不到这个错误，因为我认为它会工作，因为SharedModule也被导入了ApplicantModule和CoApplicantModule

Answer 1

您不能pipe在多个 中声明您的module。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 { }

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

页面/home/home.module.ts

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

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

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

页面/home/home.page.html

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