Angular 5 ngx-imageviewer無法正常工作

Question

我正在嘗試添加具有縮放控件等的圖像查看器畫布。ngx-imageviewer似乎提供了我需要的內容，但是當我嘗試使用angular-cli進行AOT生成時出現以下錯誤，因此無法正常工作

'client：157'ImageViewerModule'模板編譯期間出錯在裝飾器中不支持功能調用，但在'NgModule'中調用了'ɵmakeDecorator''NgModule'調用了'ɵmakeDecorator'。

當我嘗試使用JIT運行時，出現以下錯誤

'錯誤：StaticInjectorError [DomSanitizer]：
'StaticInjectorError [DomSanitizer]：NullInjectorError：沒有DomSanitizer的提供者！

有沒有人能夠使它正常工作，或者沒有人知道其他任何提供這種功能的庫嗎？ 我只需要它來支持PNG

Answer 1

我認為您正在嘗試使用Sanite網址作為圖片的src ..是嗎？ ..我非常想將其導入..如果您不這樣做，那么請嘗試這樣實現：

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" />

希望對您有幫助

Answer 2

我找到了另一個可以使用的npm軟件包，叫做ngx-image-viewer （拼寫略有不同）

當心潛在的陷阱，在添加src輸入時，您必須添加圖像網址數組，而不僅僅是網址字符串。 例如

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