Angular設置css樣式爲：ngOnInit中的主機

Question

我不知道如何爲組件中的ngOnInit中的host {}設置css樣式。 可以使用Renderer來設置？

實施例：APP-組件的主機中時由ngFor渲染：

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

在ngOnInit APP-A I想由百分之設定寬度高度風格？

我可以做到嗎？

很多謝謝。

Answer 1

你通常在組件裝飾設置樣式聲明方式：

@Component({ 
    styles: [':host { display: block; }'] 
}); 
export class AppComponent {} 

但如果你真的需要做的是從ngOnInit，可以插入主機元素，並使用渲染：

export class AppComponent { 
    constructor(private host: ElementRef, private renderer: Renderer2) { } 

    ngOnInit() { 
    this.renderer.setStyle(this.host.nativeElement, 'display', 'block'); 
    } 

Answer 2

您還可以使用@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; 
    } 
}