Question

我正在尝试在Angular应用程序中创建自定义管道，但始终收到“找不到名称为“ currencyFormat”的管道”的错误消息。我使用Angular CLI创建了管道：ng g pipe / components / pipes / currency-format，代码如下所示：

import { formatNumber } from '@angular/common';

@Pipe({
  name: 'currencyFormat'
})
export class CurrencyFormatPipe implements PipeTransform {
  transform(value: any, currency: string): any {
    const currencySymbol = (currency == 'EUR' ? '€' : '$');
    let formattedValue = `${currencySymbol} ${formatNumber(value, 'be', '1.2-2')}`;
    return formattedValue;
  }

}

因为我使用Angular CLI创建了管道，所以该管道会自动添加到app.module.ts的声明中。我试图在我的页面之一（home.page.html）中使用管道，但是仍然出现此错误。到目前为止，我已经尝试了许多不同的方法，包括将管道放在单独的模块中并尝试导入该模块，但是没有成功。

有什么想法可能是这个问题吗？

编辑：如果有用，这也是我的app.module.ts：

import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { ComponentsModule } from 'src/app/components/components.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ChartsModule } from 'ng2-charts';
import { environment } from "src/environments/environment";
import { AngularFireModule } from "@angular/fire";
import { AngularFirestoreModule } from "@angular/fire/firestore";
import { ServiceWorkerModule } from '@angular/service-worker';
import { CurrencyFormatPipe } from './components/pipes/currency-format.pipe';

@NgModule({
  declarations: [AppComponent, CurrencyFormatPipe],
  entryComponents: [],
  imports: [
    BrowserModule, 
    IonicModule.forRoot({ animated: true, mode: 'ios' }), 
    AppRoutingModule, 
    ComponentsModule,
    BrowserAnimationsModule,
    ChartsModule,
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFirestoreModule,
    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Answer 1

解决此问题的最佳方法是拥有一个通用的共享模块。这是Angular中的常见模式。

给出示例文件夹/应用程序结构：

Gameobject

然后，您在 shared.module 中声明并导出多个其他模块所需的组件，管道，指令，模块等。

shared.module.ts

class Gameobject:
    # [...]    

    def draw(self):

        # draw circle on surface 
        pygame.draw.circle(self.surface, self.objectColor, [self.radius, self.radius], self.radius)

        # create mask from surface with circle
        self.mask = pygame.mask.from_surface(self.surface)

您所有其他模块都将导入您的shared.module，并且能够使用共享模块导出中的任何内容。

app.module.ts


app
├── home
│   ├── home.component.ts
│   ├── home.module.ts
│   └── ...
├── shared
│   └── shared.module.ts
├── app.module.ts
└── ...

然后您也可以将其导入到 home.module.ts

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

@NgModule({
  declarations: [
    /* declare it once, here */
    CurrencyFormatPipe
  ],
  exports: [
    /* then export it */
    CurrencyFormatPipe
  ]
})
export class SharedModule { }

希望有帮助。 Here are the Angular docs关于共享模块。

Answer 2

如果您有多个模块，我相信您需要在AppModule之外的一个辅助模块中声明管道，并将该模块导入其他模块（包括AppModule）中以使用它。

我不确定为什么AppModule中声明的管道为什么不能从其他模块进行全局访问。它在某种程度上违背了Angular的延迟加载机制。

尝试以下

@NgModule({
    imports: [],
    declarations: [ CurrencyPipe ],
    exports: [ CurrencyPipe ]
})
export class ComponentsModule { }

@NgModule({
    imports: [ BrowserModule, HttpModule, FormsModule, ComponentsModule ],
    declarations: [ AppComponent ],
    bootstrap: [ AppComponent ]
})
export class AppModule { }

每当需要使用其他模块时，都需要导入声明管道的模块（在本示例中为ComponentModule）。

角度自定义管道不起作用'找不到管道'

2 个答案: