使用 @HostBinding 来确定 CSS 变量值的 Angular 组件在某些 Angular 应用程序中有效，而在其他应用程序中无效

Question

我使用 Angular 11.2.13 版在 Angular 中编写了一个小型 UI 组件库。在我的库中，我有一个 Dial Gage 组件，它使用 @HostBinding 来设置我的 Dial Gage 组件的 CSS 文件中使用的 css 变量的值。这是 Dial Gage 组件的打字稿文件：

import { Component, HostBinding, Input, OnInit } from '@angular/core';

@Component({
  selector: 'sio-dial-gage',
  templateUrl: './dial-gage.component.html',
  styleUrls: ['./dial-gage.component.scss']
})
export class DialGageComponent implements OnInit {
  @Input() value: number;

  @Input() unit: string;

  @HostBinding('style.--endvalue')
  endvalue: string;

  @HostBinding('style.--rotation')
  rotation: string;

  @HostBinding('style.--percentcolor')
  percentcolor: string;

  @HostBinding('style.--backgroundcolor')
  backgroundcolor: string;

  @HostBinding('style.--inner-percentcolor')
  innerPercentcolor: string;

  minValue = 0;

  maxValue = 100;

  warningMinValue = 25;

  // used term alarm here but the color is red === error, but don't want to call it error
  alarmMinValue = 10;

  ngOnInit() {
    this.endvalue = this.setPressureGage();
    this.rotation = this.getBorderPercentage();
    this.percentcolor = this.getBorderColour('outer');
    this.innerPercentcolor = this.getBorderColour();
  }

  /**
   * Method to return the angle for the dial needle, same as getBorderPercentage but prefixes value with 90
   */
  setPressureGage(): string {
    const pointerAngle = 90 + (this.value * 1.8);
    return `${pointerAngle}deg`;
  }

  /**
   * Method to the angle for border masks
   */
  getBorderPercentage(): string {
    const borderPercent = this.value * 1.8;
    return `${borderPercent}deg`;
  }

  /**
   * Method to return correct border colour for pressure gage
   * @param border - string is outer or null, thus optional
   */
  getBorderColour(border?: string): string {
    // this is the outer border
    if (border === 'outer') {
      if (this.value <= this.warningMinValue && this.value > this.alarmMinValue) {
        return '#F06F32';
      }

      if (this.value <= this.alarmMinValue) {
        return '#E42326';
      }

      return '#009534';
    }

    if (this.value <= this.warningMinValue && this.value > this.alarmMinValue) {
      return '#FCDBCC'; 
    }

    if (this.value <= this.alarmMinValue) {
      return '#F9C8C9';
    }

    return '#D7E9E5';
  }
}

现在，这在我的组件库 Playground 中运行良好，它的外观和行为都应有尽有。当我使用 CLI 创建新的 Angular 项目并导入我的库，然后在 HTML 模板文件中使用 Dial Gage 组件时，Dial Gage 组件的外观和行为都应如此。然后，我将我的组件库添加到具有旧 Angular 版本 9.1.2 的现有项目中。我注意到在这个较旧的 Angular 应用程序中，主机绑定不起作用。我认为它可能是 Angular 版本，所以我使用 Angular CLI 和 Angular 版本 9.1.2 创建了一个新应用程序，导入了我的库.. 这看起来和表现都符合预期。我注意到 Dial Gage 组件的主机绑定不起作用的现有/旧应用程序将其 AOT 设置为 false，我将其更改为 true，这仍然没有任何区别。我还更改了 Dial Gage 组件的 ViewEncapsulation 以查看这是否是问题的根源，但这没有区别。

这是在查看导入我的 Library / Dial Gage 组件的旧版 Angular 9.1.2 应用程序时在浏览器中呈现的内容：

<sio-dial-gage _ngcontent-rdm-c43="" ng-reflect-value="50" ng-reflect-unit="Psi" class="ng-star-inserted"></sio-dial-gage>

这是在任何其他应用程序中呈现的内容，该应用程序使用 9.1.2 及更高版本的任何 Angular 版本导入我的库。

<sio-dial-gage _ngcontent-yin-c61="" value="10" unit="Psi" _nghost-yin-c62="" ng-reflect-value="10" ng-reflect-unit="Psi" style="--endvalue:108deg; --rotation:18deg; --percentcolor:#E42326; --inner-percentcolor:#F9C8C9;"></sio-dial-gage>

我想知道，任何人都可以提出一些原因或领域，为什么旧​​版应用程序中的 HostBinding 没有得到尊重/设置？我只是想不出什么会影响我的 Dial Gage 组件，所以没有设置主机绑定？如果您需要更多代码、信息或我的问题的改写，请在 cmets 中说明。感谢您的帮助。

Answer 1

当我在 tsconfig 文件 "target": "es2015" 和 "enableIvy": true 中设置时，旧的遗留应用程序中的问题似乎已解决