Angular中如何设置DIV及其内部可点击元素为只读状态？

首先明确：readonly是表单元素专属属性，仅对<input>、<textarea>等原生表单控件生效，你代码中绑定了(click)事件的div属于自定义可点击元素，没有原生只读状态，可以根据需求选以下3种快捷实现：

• 方案1：CSS全局拦截（实现成本最低，适合快速批量禁用）
  给需要设置只读的区域外层加一个自定义类，通过CSS直接拦截区域内所有鼠标交互，搭配视觉提示让用户感知到不可操作：

.action-readonly {
  pointer-events: none; /* 拦截所有鼠标点击、hover事件 */
  opacity: 0.5; /* 灰化效果 */
  cursor: not-allowed;
}

使用时直接给包裹层加类即可，不需要改动原有点击绑定逻辑：

<ng-container>
  <div class="action-readonly">
    <div fxLayoutAlign="space-around center" style="padding-right: 0px;" (click)="download1()">
        Download
        <span class="material-icons inspection-file-actions-font">
            print
        </span>
    </div>
    <div fxLayoutAlign="space-around center" (click)="upload()">
        Upload
        <span class="material-icons inspection-file-actions-font">
            file_upload
        </span>
    </div>
  </div>
</ng-container>

注意：该方案仅拦截鼠标操作，不会阻止键盘聚焦、回车触发点击的行为，对可访问性有要求的场景建议搭配逻辑判断使用。

• 方案2：Angular模板层逻辑拦截（最灵活，适配业务状态切换）
  在组件类中定义全局只读状态标记，在所有点击事件前加前置判断，状态为只读时直接不执行点击逻辑：

// 组件类中定义
isReadOnly = true; // 可根据接口返回、用户权限等业务逻辑动态切换值

模板层修改点击绑定即可，不需要改动原有download1()、upload()函数的内部逻辑：

<ng-container>
  <div fxLayoutAlign="space-around center" style="padding-right: 0px;" (click)="!isReadOnly && download1()">
      Download
      <span class="material-icons inspection-file-actions-font">
          print
      </span>
  </div>
  <div fxLayoutAlign="space-around center" (click)="!isReadOnly && upload()">
      Upload
      <span class="material-icons inspection-file-actions-font">
          file_upload
      </span>
  </div>
</ng-container>

如果项目中这类场景很多，可以封装一个通用的只读点击指令，统一做状态判断，不需要每个点击事件都手写拦截逻辑。

• 方案3：语义化标签原生禁用（长期维护推荐）
  建议把自定义可点击div替换为原生<button>元素，自带disabled属性，不需要额外写拦截逻辑就能实现原生的只读/禁用效果，同时天然支持键盘访问、屏幕阅读器识别，可访问性更好：

<ng-container>
  <div fxLayout="column" fxLayoutAlign="space-around center">
    <button style="padding-right: 0px;" (click)="download1()" [disabled]="isReadOnly">
        Download
        <span class="material-icons inspection-file-actions-font">
            print
        </span>
    </button>
    <button (click)="upload()" [disabled]="isReadOnly">
        Upload
        <span class="material-icons inspection-file-actions-font">
            file_upload
        </span>
    </button>
  </div>
</ng-container>

可以通过CSS重置button的默认样式，保持和原有div一致的视觉效果。

内容的提问来源于stack exchange，提问作者Diya Agastya