Question

试图创建用于学习目的的自定义指令。无法识别Angular 6中的renderer2无法显示图像背景的问题。

我使用的是cli，因此在app.module.ts中注册指令没有问题

WITH XMLNAMESPACES('uri' AS udt)
SELECT *
FROM (VALUES (304, format(GETDATE(),'yyyyMMddHHmmss') +'Z')) T([udt:DateTimeString/@formatCode],[udt:DateTimeString])
FOR XML PATH('AcceptanceDateTime')

html

<AcceptanceDateTime xmlns:udt="uri">
  <udt:DateTimeString formatCode="304">20181102094918Z</udt:DateTimeString>
</AcceptanceDateTime>

哪里错了？我也找不到任何控制台错误。

更新

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

预先感谢

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

Answer 2

您必须使用background-image，这是正确的CSS样式属性：

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

但是要使用网址，您必须先将其转换为安全样式：

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

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

html

更新

2 个答案: