找不到名称为“...”的管道-Angular(2 )-编程知识-白鹭情

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

我的 filter.pipe.ts 代码：

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

   @Pipe({
     name: 'filter'
   })

这是我想使用这个管道的代码片段： 想提一下这个组件在一个实作了延迟加载的路由模块中。这就是为什么我没有将此组件汇入 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 { }

uj5u.com热心网友回复：

根据您发布的代码，您可以通过将加入FilterPipe到declarations您的阵列中PortfolioModule并在AppModule.

您目前面临的问题是您想在未宣告的模块中使用管道/组件/指令。一旦您想在多个模块中使用其中一个，您就需要创建另一个可以共享这些模块的模块，我们称之为SharedModule。

您案例中的共享模块如下所示：

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

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