样式属性中的角字符串插值不起作用

Question

真的挂了好一阵子..。这不管用吗？

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>

Answer 1

通常，我们通过创建自定义管道来解决这个问题，例如：

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未找到“的错误，所以我提取了管道。

1. 创建另一个名为“管道”的文件夹
2. 制作档案。我叫“安全风格”
3. 将此代码放入(编辑器希望我使用PipeTransform)： 从“@ PipeTransform /core”导入{ DomSanitizer }；从“@角/平台-浏览器”导入{DomSanitizer}； @管道({ name：'safeStyle‘})导出类SafeStylePipe实现PipeTransform {构造函数(专用消毒液: DomSanitizer) {} 转换(val: string) {返回this.sanitizer.bypassSecurityTrustStyle(url('${val}'))；}
4. 注释掉@管道代码，并删除组件中的管道导入。
5. 进口到组件中： 导入{ SafeStylePipe }从‘./管道/安全样式’；
6. 在app模块中声明您的管道并导入它。 导入{ SafeStylePipe }从‘./管道/安全样式’； ..。声明: SafeStylePipe，
7. 应该能工作，但如果你还在犯这个错误。我替换了(见模板上下文)..。

使用

    <p class="card-text">{{product.price | safeStyle}}</p>

不知怎么的，这使得错误消失了，然后我就把它换成了货币。我觉得这是个窃听器。但是现在起作用了。

Ng-运行示例