真的挂了一会儿....不应该这样吗?
style="background-image:url('{{product.imageUrl}}')"
我无法在堆栈片段或Codepen中重现,因为它的角度特定。
我试过这个帖子的建议无济于事:
https://github.com/angular/angular/issues/8745 https://github.com/angular/angular/issues/8491 https://github.com/angular/angular/issues/8514
可能是因为我不明白在这种情况下我会把“安全”管道放在哪里。谢谢。
模板上下文:
<div *ngIf="product.title"
class="card">
<!-- <img *ngIf="product.imageUrl"
class="card-img-top"
[src]="product.imageUrl"
alt="{{product.title}}"> -->
<div *ngIf="product.imageUrl"
class="card-img-top scale-img"
style="background-image:url('{{product.imageUrl}}')"></div>
<div class="card-body">
<h5 class="card-title">{{product.title}}</h5>
<p class="card-text">{{product.price | currency}}</p>
<div *ngIf="showActions && Cart"
class="card-footer">
<button [routerLink]="['/products/', product.$key]"
class="btn btn-details btn-secondary btn-block">Details</button>
<button *ngIf="Cart.getQuantity(product) === 0; else updateQuantity"
(click)="addToCart()"
class="btn btn-secondary btn-block">Add to Cart</button>
<ng-template #updateQuantity>
<product-quantity [product]="product"
[cart]="Cart"></product-quantity>
</ng-template>
</div>
</div>
</div>
通常我们通过创建自定义管道来解决它:
HTML
[style.backgroundImage]="product.imageUrl | safeStyle"
TS
@Pipe({
name: 'safeStyle'
})
export class SafeStylePipe {
constructor(private sanitizer: DomSanitizer) {}
transform(val: string) {
return this.sanitizer.bypassSecurityTrustStyle(`url('${val}')`);
}
}
===========================================================================
我不想弄清楚这个简洁的答案,但如果你仍然遇到麻烦:
我收到了“safeStyle not found”错误,所以我解压了管道。
url('${val}')
); }}import { SafeStylePipe } from './pipes/safe-style';
...声明:[SafeStylePipe,]<p class="card-text">{{product.price | currency}}</p>
同
<p class="card-text">{{product.price | safeStyle}}</p>
并且不知何故,这使得错误消失然后我只是将其改回货币。我认为这是一个错误。但是嘿它现在有效。