Angular 2 uygulamamdaki bir Bileşen Şablonunda bir DIV'nin arka plan resmini ayarlamak istiyorum. Ancak konsolumda aşağıdaki uyarıyı almaya devam ediyorum ve istenen etkiyi alamıyorum ... Dinamik CSS arka plan görüntüsünün Angular2'deki güvenlik kısıtlamaları nedeniyle engellenip engellenmediğinden veya HTML şablonumun bozuk olup olmadığından emin değilim.
Konsolumda gördüğüm uyarı bu (img url’mi şu şekilde değiştirdim /img/path/is/correct.png:
UYARI: güvensiz stil değeri url sterilize (SafeValue [özelliğini] kullanmalıdır = bağlayıcı: /img/path/is/correct.png (bkz http://g.co/ng/security#xss )) (bkz : http: // g.co/ng/security#xss ).
DomSanitizationServiceMesele şu ki , şablonuma enjekte edilenleri Angular2'de kullanarak sterilize ediyorum. Şablonumda bulunan HTML’im şu şekildedir:
<div>
<div>
<div class="header"
*ngIf="image"
[style.background-image]="'url(' + image + ')'">
</div>
<div class="zone">
<div>
<div>
<h1 [innerHTML]="header"></h1>
</div>
<div class="zone__content">
<p
*ngFor="let contentSegment of content"
[innerHTML]="contentSegment"></p>
</div>
</div>
</div>
</div>
</div>İşte bileşen ...
Import {
DomSanitizationService,
SafeHtml,
SafeUrl,
SafeStyle
} from '@angular/platform-browser';
@Component({
selector: 'example',
templateUrl: 'src/content/example.component.html'
})
export class CardComponent implements OnChanges {
public header:SafeHtml;
public content:SafeHtml[];
public image:SafeStyle;
public isActive:boolean;
public isExtended:boolean;
constructor(private sanitization:DomSanitizationService) {
}
ngOnChanges():void {
map(this.element, this);
function map(element:Card, instance:CardComponent):void {
if (element) {
instance.header = instance.sanitization.bypassSecurityTrustHtml(element.header);
instance.content = _.map(instance.element.content, (input:string):SafeHtml => {
return instance.sanitization.bypassSecurityTrustHtml(input);
});
if (element.image) {
/* Here is the problem... I have also used bypassSecurityTrustUrl */
instance.image = instance.sanitization.bypassSecurityTrustStyle(element.image);
} else {
instance.image = null;
}
}
}
}
}Lütfen [src] = "image" kullanarak şablona bağlandığımda, örneğin:
<div *ngIf="image">
<img [src]="image">
</div>ve her şey iyi çalışıyor gibiydi imagekullanarak geçti bypassSecurityTrustUrl... kimse neyi yanlış yaptığımı görebilir mi?