如何使用 Angular 在 ngStyle 中绑定数据

Question

我正在尝试使用 Angular 8 绑定数据，但失败得很惨。我试过的方法之一如下：

<div class="speed" style="background-image: url('http://example.com/assets/images/meter.png')" [ngStyle]="{'--p':result.percentage}"></div>

和输出：

<div _ngcontent-kyh-c1="" class="speed" style="background-image: url('http://example.com/assets/images/meter.png');" ng-reflect-ng-style="[object Object]"></div>

我希望输出为：

<div _ngcontent-kyh-c1="" class="speed" style="background-image: url('http://example.com/assets/images/meter.png');--p:24;"></div>

仅供参考，{{result.percentage}} 给出输出 24。

请忽略Angular 8.

生成的_ngcontent-kyh-c1=""

Answer 1

将其添加到您的 ts 组件中。它将为您的组件添加样式

import { DomSanitizer } from '@angular/platform-browser';
import { ChangeDetectionStrategy, Component, HostBinding } from '@angular/core';

@Component({
    selector: 'my-component',
    templateUrl: './my-component.html',
    styleUrls: ['./my-component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyComponent  {

    @HostBinding('attr.style')
    public get valueAsStyle(): any {
       return this.sanitizer.bypassSecurityTrustStyle(`--p: ${this.result.percentage}`);
    }

    constructor(private sanitizer: DomSanitizer) {}
}

现在 html 您将拥有 ..... 所以 hostBinding 是修改主机组件的好方法

现在我可以在嵌套 html 中使用变量，只需使用颜色：var(--p) 会将我的文本更改为红色。这就是我假设你想要实现的目标

如何使用 Angular 在 ngStyle 中绑定数据

How to bind data in ngStyle using Angular

ng-style

angular2-ngcontent

angular

angular8