如何使用@HostBinding将背景图像添加到Angular 2+指令中？

Question

我需要创建一个通过@HostBinding添加背景图像的Angular 2+（4.x中的I＆＃39; m）指令（非组件）。我知道我已经关闭，但当我检查它时，我在Chrome的检查员中看到了background-image: none。

import { Directive, HostBinding } from '@angular/core';
import { DomSanitizer, SafeStyle } from '@angular/platform-browser';

@Directive({
    selector: '[myDirectiveWithBackgroundImage]'
})
export class MyDirective {

    @HostBinding('style.background-image')
    public backgroundImage: SafeStyle;

    constructor(private sanitizer: DomSanitizer) {
        this.backgroundImage = this.sanitizer.bypassSecurityTrustStyle(
            'url(assets/images/favicon16.png) no-repeat scroll 7px 7px;'
    );
  }
}

我的资产/ images / favicon.16png由webpack提供。我尝试了各种路径选项/assets，~/assets等等......但background-image总是none

https://plnkr.co/edit/5w87jGVC7iZ7711x7qWV?p=preview

Answer 1

background-image 不接受background-repeat的不重复和background-size的 7px等速记属性7px的即可。要使用背景速记属性，您需要使用background而不是@HostBinding('style.background')的CSS @HostBinding('style.background-image')，如：

@HostBinding('style.background')
public background: SafeStyle;

constructor(private sanitizer: DomSanitizer) {
  this.background = this.sanitizer.bypassSecurityTrustStyle(
    'url("//ssl.gstatic.com/gb/images/i1_1967ca6a.png") no-repeat scroll 7px 7px'
  );
}

请参阅此分叉plunker，了解正在使用的功能。

希望这有帮助！

Answer 2

@Alexander感谢您提供消毒剂代码。

有趣的是，只有在URL后有其他参数时，我才看到此必要。如果我只有一个URL，那么它可以工作，但是一旦我添加了“ left top”，我就会收到此错误：