javascript - Angular 指令根据窗口高度动态调整组件高度
问题描述
根据屏幕动态调整 div/components(Elements) 高度的 Angular 指令
解决方案
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() {
}
}
推荐阅读
- flutter - 用于运行 onnx 模型的颤振插件
- nvidia - 在 Jetson nano 和 jetson xavier 上运行 Nvidia-docker 以实现 tensorflow 等深度学习框架
- git - 在处理其他项目时如何在 vs 代码中关闭终端中的当前 git 存储库
- spartacus-storefront - 如何在斯巴达克斯中自定义核心组件?
- vue.js - Google Analytics 在我的 vuepress 项目中不起作用
- json - 我可以在 AWS IAM 策略中的资源 arn 中使用 PrincipalTag 来授权团队吗?
- python - 树莓派运行启动python脚本无法发送HTTP请求
- flutter - 我们如何使加载器小部件flutter_spinkit居中?
- javascript - 从 Revolut API 获取刷新访问令牌时缺少 client_secret
- python - 如何在 Python Click 程序上修改回上下文或在命令之间共享修改后的值