angular - 在 Angular 中使用主机绑定(bind)注入(inject)样式声明

Question

你们知道我如何使用@HostBinding 装饰器在组件中批量注入(inject)样式声明吗？我正在尝试的是:

@HostBinding('style')
get style(): CSSStyleDeclaration {
  return {
    background: 'red',
    color: 'lime'
  } as CSSStyleDeclaration;
}

在我的理解中，这应该将背景和颜色样式注入(inject)组件，但它没有...

我可以像这样控制单个样式声明:

@HostBinding('style.background') private background = 'red';

但我想为他们所有人做这件事，请帮忙:P

这是完整的代码:

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello world!</h2>
    </div>
  `,
})
export class App {

  // This works
  @HostBinding('style.color') private color = 'lime';

  /* This does not work
  @HostBinding('style')
  get style(): CSSStyleDeclaration {
    return {
      background: 'red'
    } as CSSStyleDeclaration;
  }
  */

  constructor() {}
}

和一个工作的plunker: https://plnkr.co/edit/CVglAPAMIsdQjsqHU4Fb?p=preview

Answer 1

您需要传递与添加到元素(如 <div style="...">)相同的值和 sanitize风格

  @HostBinding('style')
  get myStyle(): SafeStyle {
    return this.sanitizer.bypassSecurityTrustStyle('background: red; display: block;');
  }

  constructor(private sanitizer:DomSanitizer) {}

working demo