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>

提前致谢

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)')    
     }
  }