domSanitizer SafeStyle不工作角5

Question

我知道有类似的问题。domSanitizer和WARNING: sanitizing unsafe style value url我已经做了我说过的话，我似乎无法让它起作用。

app.component.html

<div *ngIf="item?.fields?.asset[0]?.fields?.backgroundImage" class="program-item_background" [style.background]=backgroundImage></div>

app.component.ts

import { DomSanitizer, SafeResourceUrl, SafeUrl, SafeStyle } from '@angular/platform-browser';

export class ProgramItemComponent implements OnInit, OnChanges, Sanitizer {
    @Input() item: Entry<any>; // Program Item getting passed down from the parent        
    backgroundImage: SafeStyle;

constructor(
    private sanitization: DomSanitizer
) { }

ngOnChanges(changes: SimpleChanges) {
    this.backgroundImage = this.safeStyle(this.item.fields.asset[0].fields.backgroundImage.fields.file.url);
}

safeStyle(url){
    return this.sanitization.bypassSecurityTrustStyle(`'url(${url})'`);
}

我也会在控制台上看到这个错误。

​

但我认为那是因为它找不到backgroundImage。因为它是从外部api中提取的。

任何帮助都将不胜感激！谢谢

编辑

我也试过这个..。

ngOnChanges(changes: SimpleChanges) {
    this.backgroundImage = this.sanitization.bypassSecurityTrustStyle(`'url(${this.item.fields.asset[0].fields.backgroundImage.fields.file.url})'`);
}

但这似乎也不管用

Answer 1

我想出了一个方法，而不是使用消毒的url，我只是像这样使用[ngStyle]

<div *ngIf="item?.fields?.asset[0]?.fields?.backgroundImage" class="program-item_background" [ngStyle]="{'background': 'url(' + this.item.fields.asset[0].fields.backgroundImage.fields.file.url + ') 50% no-repeat'}"></div>

Answer 2

事件，尽管您的项目在模板中有?，但是类中仍然有this.item。这意味着，您需要确保this.item始终存在。这就是为什么你要犯这个错误。