Angular 为 :host in ngOnInit 设置 css 样式

Question

我不知道如何在组件的 ngOnInit 中为 :host {} 设置 css 样式。 可以用Renderer来设置吗？

例子:

<app-a *ngFor ="let a in alist" [a] = "a"></app-a>

在 ngOnInit app-a 中，当由 ngFor 渲染时，我想按百分比为 :host of app-a 组件设置宽度高度样式？

我可以吗？

非常感谢。

Answer 1

您还可以使用 @HostBinding 装饰器，例如:

import { Component, HostBinding } from '@angular/core';  

@Component({
  selector: 'my-app',
  templateUrl: `./app.component.html`
})
export class AppComponent {
  @HostBinding('style.display') display: string;
  @HostBinding('style.width.%') width: number;
  @HostBinding('style.height.px') height: number;

  ngOnInit() {
    this.display = 'block';
    this.width = 50;
    this.height = 500;
  }
}