Angular 5 ngx-imageviewer 不工作答案

【问题标题】：Angular 5 ngx-imageviewer not workingAngular 5 ngx-imageviewer 不工作
【发布时间】：2018-03-22 19:32:10
【问题描述】：

我正在尝试添加带有缩放控件等的图像查看器画布。ngx-imageviewer 似乎提供了我需要的东西，但我无法让它工作，因为当我尝试使用 angular 进行 AOT 构建时出现以下错误-剪辑

'client:157 模板编译时出错装饰器不支持“ImageViewerModule”函数调用，但 'ɵmakeDecorator' 在 'NgModule' 'NgModule' 调用中被调用 'ɵmakeDecorator'。

当我尝试使用 JIT 运行时，出现以下错误

'错误：StaticInjectorError[DomSanitizer]:
静态注入器错误[DomSanitizer]： NullInjectorError: 没有 DomSanitizer 的提供者！'

有没有人能够让这个工作，或者有没有人知道提供这种功能的任何其他库？我只需要它来支持pngs

【问题讨论】：

标签： html angular png

【解决方案1】：

我认为您正在尝试为您的图像 src 使用一个健全的 url .. 可以吗？ ..我记得要导入它.. 如果你不..那么尝试这样实现：

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

@Pipe({
  name: 'safeHtml'
})
export class SafeHtmlPipe implements PipeTransform {

  constructor(private sanitizer: DomSanitizer) { }

  transform(value: any, args?: any): any {
    return this.sanitizer.bypassSecurityTrustHtml(value);
  // or
 // bypassSecurityTrustStyle(value: string): SafeStyle
 // bypassSecurityTrustScript(value: string): SafeScript
 // bypassSecurityTrustUrl(value: string): SafeUrl
  }

}

像这样导入：

@NgModule({
  declarations: [
    AppComponent,

    SafeHtmlPipe

  ],

像这样使用它：

<img [src]="myUrl | safeHtml" />

希望对你有帮助

【讨论】：

感谢您的回答。但是，我仍然遇到同样的问题。我认为问题可能出在 ngx-imageviewer 本身，因为即使我没有将图像传递给 src，它仍然会发生

【解决方案2】：

我找到了一个替代的 npm 包，我可以开始工作，名为 ngx-image-viewer（拼写略有不同）

当心一个潜在的陷阱，在添加 src 输入时，您必须添加一组图像 url，而不仅仅是 url 字符串。例如

<ngx-image-viewer  [src]="['imagePath']"></ngx-image-viewer>

【讨论】：