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

Question

我制作了一个自定义管道并想在我的项目中使用它，但在实施该管道时出现此错误：“src/app/portfolio/port-main/port-main.component.html:11:124 - 错误 NG8004：无管道发现名称为 'filter'."

我的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 { }

Answer 1

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

您目前面临的问题是您想在未声明的模块中使用 pipe/component/directive。一旦你想在多个模块中使用其中一个，你需要创建另一个模块来共享这些模块，我们称之为 SharedModule.

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

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

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

exports 数组很重要，因为您只能在其他模块中使用该数组中的 components/pipes/directives。

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

No Pipe found with name '...' - Angular(2+)

javascript

pipe

angular