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> -> 不好

第二个例子：

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。

我也尝试稍后在 ngAfterViewInit() 中使用 setTimeout 动态更改值，它在从 "none" 更改为 "blue" 时有效，但不适用于 URL，数值保持在"none".

Answer 1

这是一个行为，因为 Angular2 的样式清理器非常严格......最近似乎已修复。

看到这个问题：

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

Angular2 @HostBinding cannot bind on background-image style

styles

typescript

angular