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

Question

在 shorthand 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 的错误？当然，解决方法是不使用 shorthand 属性。

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

Answer 1

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

DomSanitizer

Sanitization is the inspection of an untrusted value, turning it into a value that's safe to insert into the DOM. In many cases, sanitization doesn't change a value at all. Sanitization depends on context: a value that's harmless in CSS is potentially dangerous in a 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

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

Why can I not use @HostBinding on shorthand CSS grid properties?

css-grid

angular2-hostbinding

angular