Angular2 @HostBinding无法在背景图像样式上绑定

Question

当使用@HostBinding将属性绑定到我的组件的背景图像时,当我指定图像URL时它不起作用.

Angular2 RC-1的第一个例子:

import {Component, HostBinding} from "@angular/core";

@Component({
    selector: 'demo',
    template: 'something'
})
export class DemoComponent {

    @HostBinding('style.background-image')
    backgroundImage = 'url(http://placekitten.com/g/200/300)';
}

在检查DOM时,我们可以找到<demo>something</demo> - > NOT GOOD

---

第二个例子:

import {Component, HostBinding} from "@angular/core";

@Component({
    selector: 'demo',
    template: 'something'
})
export class DemoComponent {

    @HostBinding('style.background-image')
    backgroundImage = 'none';
}

这次,在检查DOM时,我们可以找到<demo style="background-image: none;">something</demo> - > GOOD

---

我尝试使用background而不是background-image,它使用颜色,"blue"但仍然无法使用URL.

我还尝试稍后使用setTimeout内部动态更改值ngAfterViewInit(),它在更改"none"为"blue",但不是使用URL时工作,值保持不变"none".

Answer 1

这是一种行为,因为Angular2的风格消毒剂非常严格......似乎最近已经修复了.

看到这个问题:

• https://github.com/angular/angular/issues/8491
• https://github.com/angular/angular/issues/8514(修复)