Angular指令，根据每个窗口的高度动态调整组件的高度

Question

根据屏幕动态调整div/components(Elements)高度的Angular指令

Answer 1

import { Directive, ElementRef, Renderer2, AfterViewInit } from '@angular/core';
@Directive({
selector: '[appAutoFullHeight]'
})
export class AutoFullHeightDirective implements AfterViewInit {
constructor(
private el: ElementRef,
private renderer: Renderer2
) {
const windowHeight = window.innerHeight > 600 ? window.innerHeight : 600;
const calculatedheight = `${windowHeight - 150}px`; // can be simply windowheight but you can do the adjuscement here
this.renderer.setStyle(this.el.nativeElement, 'height', calculatedheight);
}
ngAfterViewInit() {
}
}