angular - 警告 : sanitizing unsafe style value

Question

对于 Angular 的第 7 版，我有这个简单的代码:

@Component({
  selector: 'nf-delete',
  template: `
    <span [title]="title" class="mdi mdi-close-circle font-size-medium">
    </span>
  `,
  styles: [
      `
      :host {
        cursor: pointer;
        line-height: 1;
        vertical-align: middle;
      }

      :host(.inline) {
        display: inline-block;
      }
    `
  ]
})
export class DeleteComponent {
  @Input() title = 'Delete';
  @Input() inline = false;

  @HostBinding('class.inline')
  get isInline() {
    return this.inline;
  }
}

我写了另一个版本:

@Component({
  selector: 'nf-delete',
  template: `
    <span [title]="title" class="mdi mdi-close-circle font-size-medium">
    </span>
  `,
  styles: [
      `
      :host {
        cursor: pointer;
        line-height: 1;
        vertical-align: middle;
      }
    `
  ]
})
export class DeleteComponent {
  @Input() title = 'Delete';

  constructor(private readonly sanitizer: DomSanitizer, private el: ElementRef, private rendrer: Renderer2) {
  }

  @Input() set inline(inline: boolean) {
    inline && this.rendrer.setStyle(this.el.nativeElement, 'display', this.sanitizer.bypassSecurityTrustStyle('inline-block'));
  }
}

两个版本输出警告如下:

core.js:13290 WARNING: sanitizing unsafe style value [object Object] (see http://g.co/ng/security#xss).

有人知道如何解决这个警告吗？

Answer 1

使用HostBinding在更改检测期间在宿主元素上设置属性/样式。

我在这里为您的案例实现了一个小演示:https://stackblitz.com/edit/angular-k9sr9d

inline: boolean;
@HostBinding('style.display') get disp() {
  return this.inline ? 'inline-block' : '';
}