Angular 模拟 Ctrl+鼠标滚动缩小页面至 80%

如果你想在 Angular 中模拟 Ctrl + 鼠标滚动来缩小前端页面到 80%，你可以使用'HostListener'装饰器和'WheelEvent'事件来实现。

首先，你需要在组件类中导入'HostListener'装饰器和'Renderer2'服务。

import { Component, HostListener, Renderer2 } from '@angular/core';

然后，在组件类中添加一个私有变量来存储当前缩放比例，并在构造函数中初始化为 1（即 100%）。

export class YourComponent {
  private zoomLevel: number = 1;

  constructor(private renderer: Renderer2) { }
}

接下来，使用'@HostListener'装饰器监听'wheel'事件，并在事件处理程序中检查是否按下了 Ctrl 键。如果按下了 Ctrl 键，阻止默认的滚动行为，并根据滚动方向和 Ctrl 键的按下情况更新缩放比例。

@HostListener('wheel', ['$event'])
onWheel(event: WheelEvent) {
  if (event.ctrlKey) {
    event.preventDefault();

    const delta = Math.max(-1, Math.min(1, event.deltaY));
    const zoomStep = 0.1;

    if (delta > 0) {
      // 缩小页面
      this.zoomLevel -= zoomStep;
    } else {
      // 放大页面
      this.zoomLevel += zoomStep;
    }

    this.zoomLevel = Math.max(0.1, Math.min(1, this.zoomLevel));

    this.renderer.setStyle(document.body, 'transform', `scale(${this.zoomLevel})`);
  }
}

在'onWheel'方法中，我们首先检查'event.ctrlKey'属性来确定是否按下了 Ctrl 键。然后，根据'event.deltaY'属性的值判断滚动方向。如果'event.deltaY'大于 0，表示向下滚动，我们就将缩放比例减小 0.1。如果'event.deltaY'小于 0，表示向上滚动，我们就将缩放比例增加 0.1。然后，我们将缩放比例限制在 0.1 到 1 之间，并使用'Renderer2'服务将缩放样式应用于整个页面。

最后，你可以在组件的 HTML 模板中添加一些内容来测试这个功能。

<div>
  <h1>Angular Zoom Example</h1>
  <p>Use Ctrl + Mouse Wheel to zoom in/out.</p>
</div>

现在，当你在浏览器中运行应用并按下 Ctrl 键，然后使用鼠标滚动时，页面将按照你的滚动行为来缩放，最大缩放比例为 100%，最小缩放比例为 80%。