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

Question

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

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

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

Answer 1

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

中导入创建的模块

Answer 2

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

我通常会创建一个目录来使事情井井有条。在这种情况下 pipes 目录。

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>
...

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

Error in importing a Angular custom pipe from a shared folder

angular

typescript

module

single-page-application

angular9