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

Question

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

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

我想请求您的帮助，因为找不到这个错误，因为我认为它会工作，因为 SharedModule 也被导入 ApplicantModule 和 <强>共同申请人模块

Answer 1

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

---

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

管道/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>
...