Angular 11 系列（十五）获取组件高度和动态调整高度

小渣渣

Angular 9 系列（一）动态加载组件
https://www.itsvse.com/thread-9238-1-1.html

Angular 9 系列（二）动态组件传参
https://www.itsvse.com/thread-9245-1-1.html

Angular 9 系列（三）订阅动态组件事件
https://www.itsvse.com/thread-9246-1-1.html

Angular 9 系列（四）自定义 Pipe 管道
https://www.itsvse.com/thread-9248-1-1.html

Angular 9 系列（五）格式化金额货币格式
https://www.itsvse.com/thread-9249-1-1.html

Angular 9 系列（六）调用原生JS变量和方法
https://www.itsvse.com/thread-9254-1-1.html

Angular 9 系列（七）css样式作用域
https://www.itsvse.com/thread-9264-1-1.html

Angular 9 系列（八）更新子组件的值通过set触发事件
https://www.itsvse.com/thread-9267-1-1.html

Angular 9 系列（九）#id 选择器在页面应用
https://www.itsvse.com/thread-9278-1-1.html

Angular 9 系列（十）嵌入vconsole、eruda开发者调试面板
https://www.itsvse.com/thread-9286-1-1.html

Angular 9 系列（十一）定义样式的5种方法
https://www.itsvse.com/thread-9305-1-1.html

Angular 9 系列（十二）基于OTP生成动态令牌
https://www.itsvse.com/thread-9325-1-1.html

Angular 10 系列（十三）引入百度 echarts 图表
https://www.itsvse.com/thread-9347-1-1.html

Angular 11 系列（十四）生产环境进行 Debug 调试
https://www.itsvse.com/thread-9348-1-1.html

首先，动态浏览器可见高度和宽度代码如下：

登录可见。

我们背景为宝蓝色的div跟随整个浏览器的高度变化而变化，高度为浏览器可见高度的五分之一，控制台输出当前窗口调整后的宽度值和高度值，如下图：



代码如下：

html代码：

登录可见。

ts 代码：

登录可见。

获取组件的高度

app-test1 组件 html 代码如下：

登录可见。

html 代码：

登录可见。

ts 代码：

登录可见。

对于Angular 8或更高版本，您需要在ViewChild中提供二个参数

登录可见。

否则会报错如下：

ERROR TypeError: Cannot read property 'clientHeight' of undefined

我们直接获取 test1 组件高度，会返回0，我们需要从外面包裹一层div才能获取到正常的高度，如下图：



（完）

小渣渣

或者尝试使用：https://www.npmjs.com/package/angular-resize-event