Wie füge ich ein Hintergrundbild zu einer Angular 2+ Direktive mit @HostBinding hinzu?

Question

Ich muss eine Angular 2+ (ich bin in 4.x) -Richtlinie (keine Komponente) erstellen, die ein Hintergrundbild über @HostBinding hinzufügt. Ich weiß, dass ich in der Nähe bin, aber wenn ich es inspiziere, sehe ich background-image: none im Inspektor von Chrome.

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;' 
    ); 
    } 
} 

Meine Assets/images/favicon.16png werden von webpack bereitgestellt. Ich habe alle möglichen Optionen zur Pfad versucht, /assets, ~/assets, etc ... Aber background-image ist immer none

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

Answer 1

background-image ist nicht akzeptieren Kurzschrift-Eigenschaften wie background-repeat ‚s no-repeat und background-size7px 7px. Um Sie Hintergrund Kurzschrift-Eigenschaften verwenden müssen CSS verwenden background für die @HostBinding('style.background') statt @HostBinding('style.background-image') wie:

@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' 
); 
} 

Sehen Sie diese gegabelten plunker die Funktionalität in Aktion zeigt.

Hoffentlich hilft das!