找不到“安全”的管道 ionic 4答案

【问题标题】：The pipe 'safe' could not be found ionic 4找不到“安全”的管道 ionic 4
【发布时间】：2020-12-04 15:37:49
【问题描述】：

我正在使用管道清理 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 <----------
    { ...

我的.page.html

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

控制台错误...错误：找不到“安全”管道！

我遵循了一个关于此的教程并在谷歌搜索后将 SafePipe 添加到提供程序，我在这里缺少什么？谢谢

【问题讨论】：

标签： angular typescript pipe ionic4

【解决方案1】：

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

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

您需要创建一个SharedModule 并在此ShareModule 中声明和导出SafePipe。您将这个SharedModule 导入到一个要使用这个pipe 的模块中。

添加更多可在整个应用程序中使用的组件或管道。

这是一个 stackblitz 演示，用于展示如何使用 SharedModule：

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

【讨论】：

有没有办法从 app.module 声明这样一个简单的管道，并在整个应用程序中“全局”引用它？在应用程序的每个页面中声明的 sharedmodule 组件中声明的管道似乎很复杂。只是为了清理资源 url？任何代码示例供参考，谢谢;)
另外，您提到需要创建一个声明和导出 SafePipe 的 SharedModule .. 不是 safe.pipe.ts 组件，基本上是这个组件，因为它是声明和导出的位置，我我试图将它导入 app.module 以在应用程序的任何地方使用？如果有人可以在代码中向我展示一个设置此管道的正确方法的简短示例，我们将不胜感激。谢谢 yash
无法将管道声明为全局。这就是为什么要定义 SharedModule 并将其导入到模块中的原因，当您想使用共享组件或管道等时。
嗨@RayAndison，很高兴知道它有效。不确定DomSantitizer 是如何工作的，但我可以检查一下。您可以发布另一个关于它的问题，因为我不熟悉 DomSantitizer 所以不确定我是否可以提供帮助，但我一定会检查它
再次感谢，在这里发布了消毒剂错误stackoverflow.com/questions/63435772