augnlar实现点击保存按钮后，让界面禁用鼠标点击事件，ts实现

好的，以下是使用Angular和TypeScript实现点击保存按钮后禁用整个页面的鼠标点击事件的代码示例：

HTML代码：

<button (click)="save()">保存</button>
<div class="mask" *ngIf="isSaving"></div>

CSS代码：

.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

TypeScript代码：

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

@Component({
  selector: 'app-root',
  template: `
    <button (click)="save()">保存</button>
    <div class="mask" *ngIf="isSaving"></div>
  `,
  styles: [`
    .mask {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 9999;
    }
  `]
})
export class AppComponent {
  isSaving = false;
  clickableElements: NodeListOf<HTMLElement>;

  constructor() {
    this.clickableElements = document.querySelectorAll('button, a, input[type="button"], input[type="submit"]');
  }

  @HostListener('document:click', ['$event'])
  onClick(event: MouseEvent) {
    if (this.isSaving) {
      event.preventDefault();
      event.stopPropagation();
    }
  }

  save() {
    // 禁用所有可点击元素
    for (let i = 0; i < this.clickableElements.length; i++) {
      this.clickableElements[i].disabled = true;
    }
    // 显示遮罩层
    this.isSaving = true;
  }

  // 恢复页面状态
  restorePage() {
    for (let i = 0; i < this.clickableElements.length; i++) {
      this.clickableElements[i].disabled = false;
    }
    this.isSaving = false;
  }
}

在这个示例中，我们首先在组件的构造函数中获取了页面上所有可点击的元素，然后在 `save()` 方法中遍历所有可点击的元素，将它们的 `disabled` 属性设置为 `true`，并设置 `isSaving` 属性为 `true` 来显示遮罩层。为了防止用户通过点击页面其他地方来触发相关事件，我们还使用了一个 `HostListener` 来捕获整个文档的点击事件，并在 `onClick()` 方法中阻止它们的传播。当保存完成或者发生错误时，我们调用 `restorePage()` 方法来恢复页面状态。