背景图像上的 Angular (负载)

Question

我正在使用 Angular 5，并且试图在加载 div 的背景图像时获取加载图标。
如果它是一个普通的图片，我对此没有问题，但如果我尝试将它作为背景，它就不起作用。

这是一些示例代码

app.component.html

<div class="test" [someDirective]="'some/otherImg.jpg'"></div>  
<img class="test" [someDirective]="'some/OtherImg.jpg'">

app.component.css

.test{
  width: 300px;
  height: 200px;
}

some.directive.ts

import { Directive, ViewChild, Input, ElementRef, HostListener } from '@angular/core';
@Directive({
  selector: '[someDirective]'
})
export class SomeDirective {
  @Input() someDirective:string;

  constructor(private element:ElementRef){
    element.nativeElement.src = 'some/imgUrl.gif';
    element.nativeElement.style = "background-image: url('some/imgUrl.gif')";
  } 

  @HostListener('load', ['$event'])
  onLoad() {
    this.element.nativeElement.src = "some/otherImg.jpg";
    this.element.nativeElement.style = "background-image: url('some/otherImg.jpg')";
  }
}  

有没有办法让它工作，以便背景也以与普通图像相同的方式加载？

我应该提到，让加载 gif 作为背景图像没有任何问题，它工作正常，但不会改变。

Answer 1

不要直接操作ElementRef。使用Renderer类。使用可观察量尝试此实现。就像 zmanc 提到的那样，你不能使用 background-url 技术。坚持使用 src 属性。

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

import { fromEvent } from 'rxjs/observable/fromEvent';
import { first } from 'rxjs/operators';

@Directive({
  selector: '[load]',
})
export class LoadImageDirective {
  constructor(private renderer: Renderer2, private el: ElementRef) { }

  ngOnInit() {
    fromEvent(this.el.nativeElement, 'load')
      .pipe(first())
      .subscribe(() => this.setImage())

    this.setPlaceholder();

  }

  private setPlaceholder() {
    this.renderer.setAttribute(
      this.el.nativeElement,
      'src', `https://via.placeholder.com/50x50`
    )
  }


  private setImage = () => {
    this.renderer.setAttribute(
      this.el.nativeElement,
      'src', `https://http.cat/400`
    )
  }
}

Live demo