Angular：根据浏览器缩放比例，自适应窗口大小-Toy模板网

这篇具有很好参考价值的文章主要介绍了Angular：根据浏览器缩放比例，自适应窗口大小。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言

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

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

正文

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

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

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

解决思路：

原生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 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);
  }
}