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

【问题标题】：How do I add a background-image to an Angular 2+ Directive using @HostBinding?如何使用 @HostBinding 将背景图像添加到 Angular 2+ 指令？
【发布时间】：2017-07-21 17:28:02
【问题描述】：

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

【问题讨论】：

你能创建一个 plunker 吗？
/assets 相对于 /src 在哪里？
@Maximus plnkr.co/edit/5w87jGVC7iZ7711x7qWV?p=preview 但是，在 plunkr 中它并没有添加 background-image 根本。它确实添加了其他样式。
@Vega src/main/ui/assets 但是，在提供服务时，资产是在根目录下提供的。
'url(/main/ui/assets/images/favicon16.png) no-repeat scroll 7px 7px;'也是如此

标签： angular background-image angular2-directives angular2-hostbinding

【解决方案1】：

background-image 确实不接受速记属性，例如 background-repeat 的 no-repeat 和 background-size 的 7px 7px。要使用背景速记属性，您需要将 CSS background 用于 @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 演示实际功能。

【讨论】：

15 年以上的 HTML 开发经验，我应该知道这一点！谢谢！值得注意的是，我在字符串的末尾也有一个杂散的;，它也破坏了它。我已将我的 plunker 更新为工作状态。
如果你想包含background-cover，它需要采用这种格式并带有/：url("assets/images/backgrounds/bathroom.png") left center / cover no-repeat

【解决方案2】：

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

有趣的是，如果我在 URL 之后有额外的参数，我只会看到这是必要的。如果我只有一个 URL，它就可以工作，但是一旦我添加了“左上角”，我就会收到这个错误：

【讨论】：