在Angular中使用Hostbinding注入样式声明

发布时间：2020-12-17 17:33:43 所属栏目：安全来源：网络整理

导读：你们知道如何使用@HostBinding装饰器在组件中批量注入样式声明吗？我在想的是： @HostBinding('style')get style(): CSSStyleDeclaration { return { background: 'red',color: 'lime' } as CSSStyleDeclaration;} 在我的理解中,这应该为组件注入背景和颜色

你们知道如何使用@HostBinding装饰器在组件中批量注入样式声明吗？
我在想的是：

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

在我的理解中,这应该为组件注入背景和颜色样式,但它不…

我可以像这样控制各个样式声明：

@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

解决方法

您需要传递与添加到< div style =“...”>等元素相同的值.和 sanitize的风格

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

  constructor(private sanitizer:DomSanitizer) {}

working demo

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!