Angular 样式内的字符串插值属性不起作用

Question

真的挂了一会儿....这不应该工作吗？

style="background-image:url('{{product.imageUrl}}')"

我无法在堆栈片段或 Codepen 中重现，因为它 angular 特定。

我已经尝试过此线程的建议但无济于事：

https://github.com/angular/angular/issues/8745 https://github.com/angular/angular/issues/8491 https://github.com/angular/angular/issues/8514

可能是因为我不明白在这种情况下应该把 'safe' 管道放在哪里。谢谢。

模板上下文：

<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 not found" 错误，所以我提取了管道。

创建另一个名为 'pipes'
制作文件。我打电话给 'safe-style.ts'
将此代码放入（编辑器希望我使用 PipeTransform）：

从'@angular/core'导入{PipeTransform，管道}；从'@angular/platform-browser'导入{DomSanitizer};

@管道({ 姓名：'safeStyle' }) 导出 class SafeStylePipe 实现 PipeTransform { 构造函数（私人消毒剂：DomSanitizer）{}

转换（值：字符串）{ return this.sanitizer.bypassSecurityTrustStyle(url('${val}')); } }
注释掉@Pipe 代码并删除您放入组件中的管道导入。
导入组件：

从'../pipes/safe-style'导入{SafeStylePipe};
在应用程序模块中声明您的管道并导入它。
```
import { SafeStylePipe } from './pipes/safe-style';
```
... 声明：[ SafeStylePipe, ]
应该可以，但如果您仍然遇到该错误。我替换了（参见模板上下文）...
```
<p class="card-text">{{product.price | currency}}</p>
```

和

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

不知怎么的，错误消失了，然后我就把它改回了货币。我认为这是一个错误。但是，嘿，现在可以用了。

Ng-run Example

Angular 样式内的字符串插值属性不起作用

Angular string interpolation within a style property not working

angular

string-interpolation

property-binding

Angular 样式内的字符串插值 属性 不起作用

Angular string interpolation within a style property not working

angular

string-interpolation

property-binding

Angular 样式内的字符串插值属性不起作用