找不到管道 'safe' ionic 4

Question

我正在使用管道清理 ionic 4 应用程序中受信任的资源网址

safe.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({
  name: 'safe'
})
export class SafePipe implements PipeTransform {

  constructor(private sanitizer: DomSanitizer) {}

  transform(url: string) {
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }

}

app.module.ts

import { SafePipe } from './services/safe.pipe';<---------

@NgModule({
  declarations: [AppComponent, SafePipe],<----------
  entryComponents: [],
  imports: [
    BrowserModule, 
    IonicModule.forRoot(), 
    AppRoutingModule, 
    HttpClientModule
  ],
  providers: [
    StatusBar,
    SplashScreen,
    SafePipe <----------
    { ...

my.page.html

... [data]="urlData | safe" ...

控制台错误... Error:The 找不到管道 'safe'！

我按照这方面的教程进行操作，并在谷歌搜索后将 SafePipe 添加到提供程序，我在这里缺少什么？谢谢

Answer 1

pipe 不必添加到 providers。只需确保在同一模块中声明的组件中使用 SafePipe，或者组件的模块应导入声明和导出 SafePipe 的模块。

我可以看到您在 AppModule 中声明了 SafePipe 并在 MyPageComponent 中使用了它。

您需要制作一个SharedModule并在此ShareModule中声明并导出SafePipe。您将此 SharedModule 导入到要使用此 pipe.

的模块中

添加更多可跨应用程序使用的组件或管道。

这是一个演示如何使用 SharedModule 的 stackblitz 演示：

https://stackblitz.com/edit/shared-pipe

找不到管道 'safe' ionic 4

The pipe 'safe' could not be found ionic 4

pipe

typescript

angular

ionic4