【问题标题】:Angular directive to adjust your component Height as per window height DynamicallyAngular 指令根据窗口高度动态调整组件高度
【发布时间】:2021-06-03 00:12:21
【问题描述】:

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

【问题讨论】:

  • 你的问题是什么?
  • 使用 css height: 100vh?
  • 是的......这也有效......但这是一种更有效的方法@Eliseo

标签: javascript angularjs angular angularjs-directive directive


【解决方案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() {

  }

}

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2013-06-06
    • 1970-01-01
    • 2012-06-19
    • 2012-02-27
    • 1970-01-01
    • 2020-11-23
    • 1970-01-01
    • 2011-12-29
    相关资源
    最近更新 更多