根据窗口高度动态调整组件高度的角度指令

本文介绍了根据窗口高度动态调整组件高度的角度指令的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

Angular directive to adjust the height of your div/components(Elements) Dynamically as per screen

推荐答案

    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() {

  }

}

这篇关于根据窗口高度动态调整组件高度的角度指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！