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

Question

我需要创建一个 Angular 2+（我在 4.x）指令（不是组件），它通过 @HostBinding 添加背景图像。我知道我很接近，但是当我检查它时，我在 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;'
    );
  }
}

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

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

Answer 1

background-image 不接受 shorthand 属性，例如 background-repeat 的 no-repeat和 background-size 的 7px 7px。要使用背景 shorthand 属性，您需要对 @HostBinding('style.background') 使用 CSS 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 它可以工作，但是一旦我添加 'left top' 然后我得到这个错误：

Answer 3

我设法让主机绑定与 background-image 属性一起工作。

只需像这样将 style 放入主机绑定中 @HostBinding('style') backgroundImage: safeStyle; 而不是 @HostBinding('style.background-image') backgroundImage: safeStyle;

@HostBinding('style') backgroundImage: safeStyle;

this.backgroundImage = this.sanitizer.bypassSecurityTrustStyle(`background-image: url('${url}')`);

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

How do I add a background-image to an Angular 2+ Directive using @HostBinding?

background-image

angular2-directives

angular2-hostbinding

angular