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

前言

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

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

正文

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

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

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

解决思路：

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

概念早知道

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

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

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

在Angular中包含以下三种类型的指令：

1. 属性指令：以元素的属性形式来使用的指令。
2. 结构指令：用来改变DOM树的结构
3. 组件：作为指令的一个重要子类，组件本质上可以看作是一个带有模板的指令。

定义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 2023/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);
  }
}

自定义指令导入到模块

在xx.module.ts中，引入自定义的指令 WindowResizedDirective ，如下图所示：

使用指令

在组件中使用自定义的指令，打开对应的xx.component.html，在对应的html标签中添加指令选择器，如下所示：

效果展示

浏览器缩放比例 100%，效果图：

浏览器缩放比例 80%，效果图：

浏览器缩放比例 150%，效果图：

小结

总体来说，只要客户需求不太苛刻，都是有解决方案的。就像前几年，某公司产品经理对开发人员提过分需求，被暴打的事件，那种需求是真的没法做，因为目前技术都无法支撑。今天就分享到这里吧！

温情提示：如果你也有梦想，还想继续行走在程序设计这条道路上，就不要止步不前！每天学习积累经验，有助于你更好的成长和发展，加油吧，朋友们！

感谢您读完了进修者的内容分享，欢迎留言区一起聊聊天，聊聊关于您对“Angular：根据浏览器缩放比例，自适应窗口大小”有什么更好的想法!

我是进修者，期待与您肩并肩，一起进化成长！