失眠网 > Angular：根据浏览器缩放比例自适应窗口大小

Angular：根据浏览器缩放比例自适应窗口大小

时间：2023-11-08 22:15:13

文章目录

前言正文概念早知道定义directive.ts文件编写业务逻辑自定义指令导入到模块使用指令效果展示小结

前言

实际生产过程中，客户有时会提出一些界面优化的需求。拿到需求后，你会发现与前端框架设计理念背道而驰，但也要尽量满足，因为客户就是上帝。

前不久，就接到一个优化需求，客户要求缩放屏幕，界面要自动适应屏幕大小。当时我脑海里闪现了几个字：“太残暴了”！

正文

进入正式内容之前，我们首先来分析一下这个需求点。然后提取出关键词，最后找相应的技术来支持这些关键点。

需求：调整浏览器缩放比例，功能界面要自动适应屏幕大小，界面高度满屏展示；

分析：提取关键字“缩放比例”、“自动适应屏幕大小”

解决思路：

原生JS，根据 window.onresize 自动调整大小，来完成相应要求；项目使用Angular框架，与原生JS有所不同，需要相关技术支撑；经调研，Angular中指令（Directive）可以实现该需求点，重点学习该技术。

概念早知道

Angular 中指令可以对元素绑定事件监听或者改变 DOM 结构而使 HTML 拥有像 jQuery 一样效果具有交互性。不同于 jQuery，Angular 设计核心思想是通过数据与模板的绑定，摆脱繁琐的 DOM 操作，而将注意力集中在业务逻辑上。

Angular 模板是动态的。当 Angular 渲染它们时，它会根据指令对 DOM 进行修改。

指令是一个带有"指令元数据"的类。在 TypeScript 中，要通过 @Directive 装饰器把元数据附加到类上。

在Angular中包含以下三种类型的指令：
属性指令：以元素的属性形式来使用的指令。结构指令：用来改变DOM树的结构组件：作为指令的一个重要子类，组件本质上可以看作是一个带有模板的指令。

定义directive.ts文件

在指定的目录下，创建指令文件，命令行方式：

ng g directive onresize

命令执行完成后，在相应的目录中生成，onresize.directive.ts文件。

编写业务逻辑

指令中需要指定选择器，然后绑定对应的事件和属性，完整代码如下：

import {AfterViewInit, Component, Directive, ElementRef,HostBinding, HostListener, Inject, Input, Renderer2} from '@angular/core';import {DOCUMENT} from '@angular/common';/*** 自适应窗口大小* @author trainer* @date /6/1*/@Directive({selector: '[fixWindow]'})export class WindowResizedDirective implements AfterViewInit {private bodyEl;@Input() marginBottom = 24;@Input() minHeight = 400;// 绑定属性@HostBinding('style.height.px') height = 400;/*** 监听事件：窗口调整大小*/@HostListener('window:resize')onResize() {// 窗口自适应大小let height = this.bodyEl.getBoundingClientRect().height - this.parentEl.nativeElement.getBoundingClientRect().top - this.marginBottom;if (height < this.minHeight) {height = this.minHeight;}// 获取内部文档大小let childHeight = this.parentEl.nativeElement.firstElementChild.getBoundingClientRect().height;/*console.log("child: -> " + childHeight);console.log("window: -> " + height);重置高度*/this.height = childHeight > height? childHeight: height;}// 构造函数constructor(private parentEl: ElementRef, private ren2: Renderer2, @Inject(DOCUMENT) private doc: Document) {}ngAfterViewInit() {// 窗体this.bodyEl = this.doc.querySelector('body');// 延迟加载 —— 重新计算setTimeout(() => this.onResize(), 100);}}