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

Question

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

Answer 1

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

DomSanitizer

清理是检查不受信任的值，将其转换为可以安全插入 DOM 的值。在许多情况下，消毒根本不会改变价值。清理取决于上下文：在 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){

  }
}

分叉示例

参考