0

我正在尝试使用 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。

请忽略_ngcontent-kyh-c1=""Angular 8 生成的。

4

1 回答 1

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) 会将我的文本更改为红色。这就是我假设您想要实现的目标

于 2019-11-26T23:48:44.773 回答