Question

我正在使用Angular 5，而我正在尝试在加载div的背景图像时获取加载图标。
我没有问题，如果它是一个正常的img，但如果我试图将它作为背景它不起作用。

这是一些示例代码

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类。尝试使用observables实现此实现。就像提到的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

Answer 2

这不能正常工作的原因是因为CSS加载不会触发DOM加载事件。经过一些研究，似乎人们解决这个问题的方式（甚至在Angular之外）是将图像加载到隐藏的img元素中并使用它来触发事件。它很乱，但这似乎是最好的方式。

角度（负载）在背景图像上

2 个答案: