Angular 4中使用Renderer2结合querySelector的点击事件处理器是否合规？

我编写了如下Angular 4组件点击事件处理器：

showPhotoDeleteButton( event ) { 
  var photoDeleteButton = (<Element>event.target).querySelector('.photo-delete'); 
  this.renderer.setStyle(photoDeleteButton, "display", "block"); 
} 
hidePhotoDeleteButton( event ) { 
  var photoDeleteButton = (<Element>event.target).querySelector('.photo-delete'); 
  this.renderer.setStyle(photoDeleteButton, "display", "none"); 
}

但我了解到不推荐直接进行DOM操作，因为Angular是跨平台框架，可运行于Web Workers等非浏览器环境，请问这种实现方式是否可行？

你的担心完全在点子上，咱们来拆解这个问题：

首先，这种实现在普通浏览器环境下能跑起来，但它既不符合Angular的跨平台设计初衷，还藏着不少坑：

• 跨平台兼容性直接报废：你提到的Web Workers环境里，event.target、querySelector这些都是浏览器专属的DOM API，在非浏览器环境（比如Web Workers、部分服务端渲染场景，或是未来可能的非Web容器）里根本不存在，代码一运行就会报错。
• 可维护性拉胯：直接操作DOM会让组件状态和DOM结构强绑定，后续如果模板里的.photo-delete类名改了，或者DOM结构调整了，你必须同步修改组件里的代码，很容易遗漏导致bug。
• 绕开Angular的变更检测：Angular靠自己的变更检测机制同步视图和数据，直接操作DOM等于绕开了这套机制，很可能出现组件状态和视图显示不一致的情况。

那正确的姿势应该是什么？推荐用数据绑定+Angular样式绑定来实现，完全贴合框架的设计逻辑：

1. 先在组件类里定义一个布尔变量，用来控制删除按钮的显示状态：

isDeleteButtonVisible = false;

2. 在模板里用*ngIf或者样式绑定来控制按钮的显示：

<!-- 方式1：用*ngIf直接控制元素是否存在 -->
<button class="photo-delete" *ngIf="isDeleteButtonVisible">删除照片</button>

<!-- 方式2：用样式绑定控制display属性 -->
<button class="photo-delete" [style.display]="isDeleteButtonVisible ? 'block' : 'none'">删除照片</button>

3. 最后修改事件处理器，只需要更新变量状态就行：

showPhotoDeleteButton() { 
  this.isDeleteButtonVisible = true;
} 
hidePhotoDeleteButton() { 
  this.isDeleteButtonVisible = false;
}

这种做法的好处一目了然：

• 完全适配Angular的跨平台特性，不管运行在什么Angular支持的环境，代码都能正常工作。
• 组件状态和视图完全解耦，后续改模板或者状态逻辑都更灵活。
• 借助Angular的变更检测自动同步视图，不会出现状态和视图不一致的问题。

当然，如果确实有特殊需求必须和DOM交互（比如复杂动画、第三方库集成），Angular也提供了更规范的方式：用@ViewChild或@ViewChildren安全获取DOM元素，而不是直接通过event.target查询，比如：

import { ViewChild, ElementRef } from '@angular/core';

// 模板里给按钮加个模板引用变量
// <button class="photo-delete" #deleteButton>删除照片</button>

@ViewChild('deleteButton') deleteButton!: ElementRef;

showPhotoDeleteButton() {
  this.renderer.setStyle(this.deleteButton.nativeElement, 'display', 'block');
}

这种方式虽然还是操作DOM，但通过Angular的API获取元素，比直接用querySelector更安全，也更符合框架规范，但依然不如数据绑定的方式推荐。

内容的提问来源于stack exchange，提问作者Michał Ziobro