Блог

Я написал небольшую библиотеку компонентов пользовательского интерфейса в Angular, используя угловую версию 11.2.13. В моей библиотеке у меня есть компонент Dial Gage, который использует @HostBinding для установки значений css-переменных, используемых в CSS-файле компонента Dial Gage. Это файл машинописного текста компонента 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 amp;amp; this.value > this.alarmMinValue) {
        return '#F06F32';
      }

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

      return '#009534';
    }

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

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

    return '#D7E9E5';
  }
}
 

Теперь это хорошо работает на игровой площадке моей библиотеки компонентов, и она выглядит и ведет себя так, как должна. Когда я создаю новый угловой проект с помощью интерфейса командной строки и импортирую свою библиотеку, а затем использую компонент Dial Gage в файле шаблона HTML, компонент Dial Gage выглядит и ведет себя так, как должен. Затем я добавил свою библиотеку компонентов в существующий проект с более старой версией Angular 9.1.2. Я заметил, что в этом более старом приложении Angular привязка хоста не работала. Я подумал, что это может быть угловая версия, поэтому я создаю новое приложение, используя угловой интерфейс командной строки с угловой версией 9.1.2, импортировал свою библиотеку.. и это выглядело и вело себя так, как и ожидалось. Я заметил, что существующее/устаревшее приложение, в котором не работала привязка узла компонента Dial Gage, имело значение AOT, равное false, я изменил его на true, и это все равно не имело значения. Я также изменил видовую капсулу компонента датчика набора номера, чтобы узнать, было ли это источником проблемы, но это не имеет значения.

Это то, что отображается в браузере при просмотре более старого, устаревшего приложения 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>
 

и это то, что отображается в любом другом приложении, которое импортирует мою библиотеку с любой версией Angular от 9.1.2 и выше.

 <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>
 

Мне было интересно, может ли кто-нибудь предложить какую-то причину или область, по которой привязка хоста в устаревшем приложении не соблюдается/не устанавливается? Я просто не могу придумать, что могло бы повлиять на мой компонент датчика набора номера, чтобы привязка хоста не была установлена? Если вам требуется больше кода, информации или переформулировки моего вопроса, пожалуйста, скажите об этом в комментариях. Спасибо за помощь.

Проблема, похоже, решена в старом устаревшем приложении, когда я установил в файле tsconfig "target": "es2015" и "enableIvy": true