typescript - Angular2 @HostBinding kan inte binda på background-image stil

När jag använder @HostBinding för att binda en egenskap till bakgrundsbilden på min komponent fungerar det inte när jag anger en bild-URL.

Första exemplet med 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)';
}

När vi inspekterar DOM kan vi hitta <demo>något</demo> -> INTE BRA

Andra exemplet :

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

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

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

Den här gången, när vi inspekterar DOM, kan vi hitta <demo style="background-image: none;">something</demo> -> BRA

Jag försökte med background istället för background-image, det fungerar med en färg som "blå" men fungerar fortfarande inte med en URL.

Jag försökte också att dynamiskt ändra värdet senare med en setTimeout inuti ngAfterViewInit(), det fungerar när man ändrar från "none" till "blue", men inte med en URL, värdet förblir "none".

Svar #1

Det är ett beteende eftersom stilrensaren i Angular2 var mycket restriktiv... Det verkar ha blivit fixat nyligen.

Se detta problem:

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

Relaterade artiklar