相关疑难解决方法(0)

我正在尝试制定一个简单的指令。加载图像时，img src 将设置为@Input()字符串字段。加载时，图像将设置为原始 src 值（或至少我尝试实现它的方式）。

我在这里使用了答案：https : //stackoverflow.com/a/38837619/843443 但它不是指令，因此在我使用图像的任何地方都需要进行一些更改。

我的第一次尝试：

加载 img.directive.ts：

import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({
  selector: '[tohLoadingImg]'
})
export class LoadingImgDirective {
  imgSrc: String;

  @Input()
  spinnerSrc: String;

  constructor(private el: ElementRef) {
    this.imgSrc = el.nativeElement.src;
    el.nativeElement.src = this.spinnerSrc;
  }

  @HostListener('load') onLoad() {
    this.el.nativeElement.src = this.imgSrc;
  }

}

从：

<img src="{{hero.imgUrl}}" alt="Random first slide">

到：

<img src="{{hero.imgUrl}}" alt="Random first slide" [tohLoadingImg]="'/assets/ring.svg'">

错误：

Can't bind to 'tohLoadingImg' since it isn't a known property …

如果我在组件中更改有界对象的值，an​​gular 会自动更新 UI 上的值。此更新过程需要几毫秒（取决于设备）。UI更新过程完成时是否有事件？

目前我使用以下代码：

// refresh binding
boundedItem = newValue;

// wait 100 milliseconds and the open the browsers print view 
setTimeout(() => {
    // open browser print view
}, 100);

在慢速设备（智能手机）上，该过程可能需要 100 多毫秒，因此代码并不是很干净。

我怎么能知道图像何时完全加载然后显示它？让我解释一下：我以以下方式显示图像：

<img src = "www.domain.com">

但有时需要加载，我只想在它准备好显示（100% 加载）时才显示它，因为您可能知道该图像何时 100% 加载？我想在图像加载完成时显示加载微调器，我使用的是 angular 7。