Angular 6 - Renderer2 - 无法显示图像背景

Question

我正在尝试创建一个自定义指令来学习，但无法确定为什么Angular 6中的renderer2未显示图像背景。

我使用了CLI，因此在app.module.ts中注册指令没有问题。

@Directive({
  selector: '[bgIMG]'
})
export class MyCustomStyleDirective {
 // private url = "http://www.publicdomainpictures.net/pictures/50000/velka/flower-meadow.jpg" 

  constructor(elm : ElementRef, renderer2:Renderer2) {
    renderer2.setStyle(elm.nativeElement, 'background-image', 'url ("http://www.publicdomainpictures.net/pictures/50000/velka/flower-meadow.jpg")')    
   }
}

html

<div bgIMG></div>

我错在哪里？我也没有发现任何控制台错误。

更新

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

@Directive({
  selector: '[bgIMG]'
})
export class MyCustomStyleDirective {

  constructor( renderer: Renderer2,  el: ElementRef) {

    renderer.setStyle(el.nativeElement, 'background-image','http://www.publicdomainpictures.net/pictures/50000/velka/flower-meadow.jpg');
    renderer.setStyle(el.nativeElement, 'font-weight','bold');

   }

}


html
-----

<div class="container">
  <div class="row">
    <div bgIMG>
      <p>some text</p>
    </div>
  </div>
</div>

感谢您的提前致谢。

- Mr. Learner

Answer 1

你做得很正确，但有一个更正是请删除==>"url ()"之间的空格，请看下面的代码，它将为您工作。

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

@Directive({
    selector: '[bgIMG]'
  })
  export class MyCustomStyleDirective {
    constructor(elm : ElementRef, renderer2:Renderer2) {
      renderer2.setStyle(elm.nativeElement, 'background-image', 'url(http://www.publicdomainpictures.net/pictures/50000/velka/flower-meadow.jpg)')    
     }
  }

- madhukar reddy

---

抱歉兄弟，我尝试了你的解决方案，但仍然没有任何反应。我也尝试了这个例子，但仍然无济于事。https://stackblitz.com/edit/angular-q3rbxz?file=app%2Fload-image.directive.ts - Mr. Learner

嗨，那个解决方案对我很有效，现在请尝试使用 https://stackblitz.com/edit/angular-nu68vn?file=app%2Fload-image.directive.ts和输出链接 https://angular-nu68vn.stackblitz.io - madhukar reddy

Answer 2

你需要使用正确的CSS样式属性background-image。

renderer2.setStyle(
  elm.nativeElement, 
  'background-image', 
  'url("http://www.publicdomainpictures.net/pictures/50000/velka/flower-meadow.jpg")'
) 

但是要使用一个URL，你必须先将它转换为安全样式：

constructor(elm : ElementRef, renderer2:Renderer2, san: DomSanitizer) {
  const bg = san.bypassSecurityTrustStyle('url("http://www.publicdomainpictures.net/pictures/50000/velka/flower-meadow.jpg")')

  renderer2.setStyle(
    elm.nativeElement, 
    'background-image', 
    bg
  ) 
}

另一方面，您也可以直接使用HostBinding属性：

@Directive({
  selector: '[bgIMG]'
})
export class MyCustomStyleDirective {
  @HostBinding('style.background-image')
  get bg(): SafeStyle {
    return this.san.bypassSecurityTrustStyle(`url("${this.url}")`);
  } 

  private url = "http://www.publicdomainpictures.net/pictures/50000/velka/flower-meadow.jpg" 

  constructor(readonly san: DomSanitizer) {}
}

- Poul Kruijt

---

非常感谢您的时间。我尝试了您提供的两种解决方案，但仍然没有成功。但是唯一的区别是，在我的控制台中出现了“警告：正在清理不安全的样式值http://www.publicdomainpictures.net/pictures/50000/velka/flower-meadow.jpg（请参见http://g.co/ng/security#xss）”。 - Mr. Learner

@worstCoder 对不起，我在上一个示例中犯了一个错误，必须将其更改为\url("${this.url}")``。 - Poul Kruijt

按照您的要求更改了，但仍然没有任何反应。 - Mr. Learner

我已经更新了我的实际代码。除了背景图片之外，该指令接受其他CSS样式。 - Mr. Learner

@worstCoder，你可以在这里找到一个可用的示例。我确实不得不将链接改为https。也许这也是你的问题？ - Poul Kruijt