typescript - Angular2 @HostBinding background-image stiline bağlanamıyor

@HostBinding kullanarak bir özelliği bileşenimin arka plan resmi ile bağladığımda, bir resim URL’si belirttiğimde çalışmıyor.

Angular2 RC-1 ile ilk örnek :

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'u incelerken, <demo>something</demo> -> İYİ DEĞİL görebiliriz

İkinci örnek :

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

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

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

Bu sefer, DOM'u incelerken <demo style="background-image: none;">something</demo> -> İYİ bulabiliriz

background-image yerine background ile denedim, "blue" gibi bir renk ile çalışıyor ama bir URL ile hâlâ çalışmıyor.

Ayrıca ngAfterViewInit() içinde bir setTimeout ile değeri dinamik olarak sonradan değiştirmeyi de denedim, "none" değerinden "blue" değerine geçerken çalışıyor, ama bir URL ile değil, değer "none" olarak kalıyor.

Cevap #1

Bu bir davranış çünkü Angular2'nin stil temizleyicisi çok kısıtlayıcıydı... Görünüşe göre yakın zamanda düzeltildi.

Bu soruna bak:

  • https://github.com/angular/angular/issues/8491
  • https://github.com/angular/angular/issues/8514 (düzeltme)

İlgili makaleler