为什么我不能在速记 CSS 网格属性上使用 @HostBinding？

【问题标题】：Why can I not use @HostBinding on shorthand CSS grid properties?为什么我不能在速记 CSS 网格属性上使用 @HostBinding？
【发布时间】：2019-09-30 23:44:07
【问题描述】：

在速记 CSS 网格属性上使用 @HostBinding 时（例如，使用 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

【问题讨论】：

标签： angular css-grid angular2-hostbinding

【解决方案1】：

由于您是直接向 DOM 添加样式，因此 Angular 认为该值是不受信任的。使用 DomSanitizer 将不可信值转化为可信值

DomSanitizer

清理是检查一个不受信任的值，把它变成一个可以安全插入 DOM 的值。在很多情况下，消毒根本不会改变价值。消毒取决于上下文：在 CSS 中无害的值在网址。

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

【讨论】：