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

Question

我需要创建一个 Angular 2+（我在 4.x）指令（不是组件），通过@HostBinding. 我知道我很接近了，但是当我检查它时，我会background-image: none在 Chrome 的检查器中看到它。

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

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

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

Answer 1

background-image不接受速记属性，如background-repeat's no-repeat和background-size's 7px 7px。要使用背景速记属性，您需要使用 CSSbackground代替@HostBinding('style.background')：@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，它就可以工作，但是一旦我添加了“左上角”，我就会收到这个错误：