找不到名称为“...”的管道 - Angular(2+)答案

【问题标题】：No Pipe found with name '...' - Angular(2+)找不到名称为“...”的管道 - Angular(2+)
【发布时间】：2022-01-23 13:40:15
【问题描述】：

我制作了一个自定义管道并想在我的项目中使用它，但在实现该管道时出现此错误：“src/app/portfolio/port-main/port-main.component.html:11:124 - 错误NG8004：找不到名为“过滤器”的管道。”

我的 filter.pipe.ts 代码：

   import { Pipe, PipeTransform } from '@angular/core';

   @Pipe({
     name: 'filter'
   })

这是我想使用此管道的代码 sn-p： 想提一下，这个组件在一个路由模块中，它实现了延迟加载。这就是为什么我没有将此组件导入 app.module.ts 文件的原因。

 <div class="card mb-3 me-3 col-lg-6 col-md-12 col-sm-12" *ngFor="let img of PortfolioArray | filter:ValueText:'category'">
...
</div>

这是我导入自定义管道的 app.module.ts 文件：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { NavbarComponent } from './navbar/navbar.component';
import { NotFoundComponent } from './not-found/not-found.component';
import { SidebarComponent } from './sidebar/sidebar.component';
import { SidebarDownComponent } from './sidebar/sidebar-down/sidebar-down.component';
import { FilterPipe } from './pipes/filter.pipe';


@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    NavbarComponent,
    NotFoundComponent,
    SidebarComponent,
    SidebarDownComponent,
    FilterPipe
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

如果有人知道如何解决此问题，请告诉我。如果需要，愿意分享更多代码。

已编辑 这是我使用管道的模块：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { PortfolioRoutingModule } from './portfolio-routing.module';
import { PortMainComponent } from './port-main/port-main.component';
import { FilterPipe } from '../pipes/filter.pipe';



@NgModule({
  declarations: [
    PortMainComponent
  ],
  imports: [
    CommonModule,
    PortfolioRoutingModule
  ],
  exports: [FilterPipe]
})
export class PortfolioModule { }

【问题讨论】：

我假设您只是发布了管道的装饰器，对吧？您是否在同一模块的组件中使用管道？
不，该管道不在同一个模块中。我在使用管道的地方添加了模块的代码

标签： javascript angular pipe

【解决方案1】：

根据您发布的代码，您可以通过将FilterPipe 添加到declarations 数组中的PortfolioModule 并在AppModule 中删除它来解决您的问题。

您当前面临的问题是您想在未声明它们的模块中使用管道/组件/指令。只要您想在多个模块中使用其中一个模块，您就需要创建另一个模块来共享这些模块，我们称之为SharedModule。

您的共享模块如下所示：

// An helper array to reduce code
const ELEMS = [FilterPipe];

@NgModule({
    declarations: [ELEMS],
    imports: [CommonModule],
    exports: [ELEMS]
})
export class SharedModule {}

exports 数组很重要，因为您只能在其他模块中使用该数组中的组件/管道/指令。

【讨论】：