Почему я не могу использовать @HostBinding для сокращенных свойств сетки CSS? - PullRequest
Новая
       35

Почему я не могу использовать @HostBinding для сокращенных свойств сетки CSS?

0 голосов
/ 01 октября 2019

При использовании @HostBinding для сокращенных свойств сетки CSS (например, grid-row вместо grid-row-start и grid-row-end) привязки не работают: 

export class MyComponent {
  @HostBinding('style.grid-row')
  row = '1 / 2';
}

Однако, используя отдельные свойстваработает: 

export class MyComponent {
  @HostBinding('style.grid-row-start')
  row = 1;

  @HostBinding('style.grid-row-end')
  row = 2;
}

Это намеренно или ошибка в Angular? Конечно, обходной путь - просто не использовать сокращенные свойства.

Stackblitz: https://stackblitz.com/edit/angular-qfotyg

1 Ответ

1 голос
/ 01 октября 2019

Поскольку вы добавляете стиль непосредственно в DOM, Angular рассматривает значение как ненадежное. Используйте DomSanitizer, чтобы превратить ненадежные значения в доверенные значения

DomSanitizer

Санитарная обработка - это проверка ненадежного значения, превращение его в значение, которое безопасно вставитьв ДОМ. Во многих случаях санитарная обработка вообще не меняет ценности. Санация зависит от контекста: значение, которое является безвредным в CSS, потенциально опасно в URL. 

export class AppGridCellBrokenComponent {
  @Input()
  text: string;

  @HostBinding('style.grid-row')
  get gridRow() {
    return this.sanitizer.bypassSecurityTrustStyle(`${this.rowStart} / ${this.rowEnd}`);
  }

  @HostBinding('style.grid-column')
  get gridColumn() {
    return this.sanitizer.bypassSecurityTrustStyle(`${this.columnStart} / ${this.columnEnd}`)
  }

  constructor(private sanitizer:DomSanitizer){

  }
}

ForkedExample

Ref

...