我制作了一個自定義管道并想在我的專案中使用它，但是在實作該管道時出現此錯誤：“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 {}
該exports陣列很重要，因為您只能在其他模塊中使用該陣列中的組件/管道/指令。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/390673.html
標籤：javascript 有角的 管道