新标签中的角度显示图像

Question

我的页面上有一个轮播图像查看器我希望用户在单击图像时会在浏览器的新选项卡中打开该图像，我编写了下面的代码，但它会下载图像而不是显示它。

component.ts:

    openFile(url: string) {
    window.open(url, "_blank");
}

component.html

<ss-lightslider-slide *ngFor="let image of images"
                        [attr.data-thumb]="image.value"
                        [attr.data-src]="image.value"
                        [attr.data-id]="image.id"
                        class="ss-asset-thumbnail">
        <img [src]="image.value" class="d-block w-100" title="{{image.name}}" alt="{{image.name}}" (click)="openFile(image.value)"/>
</ss-lightslider-slide>

我怎样才能使它在<img>标签上点击它时显示图像而不是下载它？

Answer 1

您可以创建一个窗口服务，并在单击图像时写下类似的内容

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

@Injectable({
  providedIn: 'root',
})
export class WindRefService {
  constructor() {}
  getNativeWindow() {
    return window;
  }
}

 onView() {
      this.nativeWindow.open(image);
    
  }

您可能需要寻找 getNativeWindow() 用于您的案例