@HostBindingを使用してAngular 2+ディレクティブに背景画像を追加するにはどうすればよいですか？

Question

@HostBindingで背景画像を追加するAngular 2+（私は4.xにあります）指令（コンポーネントではありません）を作成する必要があります。私は私が近くにいることを知っていますが、私はそれを調べると、クロムの検査官の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;' 
    ); 
    } 
} 

私のアセット/ images/favicon.16pngはwebpackによって提供されています。私はパスオプション、/assets、~/assets、などのすべての種類を試してみた...しかしbackground-imageはないbackground-repeatのを無リピートなど速記プロパティを受け入れず、常にnone

https://plnkr.co/edit/5w87jGVC7iZ7711x7qWV?p=preview

Answer 1

background-imageですbackground-sizeの7px 7px。背景速記のプロパティを使用するには、のような@HostBinding('style.background')代わりの@HostBinding('style.background-image')のためのCSS backgroundを使用する必要があります：

@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をフォーク。

うまくいけば助けてください！