Angular点击Disable触发‘cannot read properties native element’错误的解决方法

点击Disable触发"cannot read properties native element"错误，核心原因是当disabled变为false时，*ngIf="disabled"会把包含#Mask1的DOM元素彻底销毁，但你的代码里大概率用了@ViewChild('Mask1')获取这个元素，后续操作（比如onResizePM、拖拽相关方法）还在尝试访问它的nativeElement，此时元素已经不存在，自然报错。

方案1：用[hidden]替代*ngIf（简单直接） #

*ngIf会销毁DOM，[hidden]只是隐藏元素，DOM结构保留，这样#Mask1始终存在，不会出现nativeElement未定义的情况：
修改HTML中的外层div：

<div [hidden]="!disabled"> 
    <div class="masking" [ngClass]="{'disable': mask1}" id='mask1' (window:resize)="onResizePM($event)" #Mask1
        style="position: absolute;" [style.top.px]='Privacy_y'
        (mousedown)="handlePrivacyMousedown($event)" (mousedown)='onWindowPress($event)'
        (mousemove)='handlePrivacyMousemove($event)' (mousemove)='onWindowDrag($event)'
        [style.left.px]='Privacy_x' [style.width.px]='width' [style.height.px]='height'
        [style.display]="displayMask1">
        <div (mousedown)='onCornerClick($event, topLeftResize)' id='mask1-top-left-resize'
            class='mask1-corner-resize masking-resize'></div>
    </div>
</div>

注意：[hidden]依赖CSS的display:none，如果你的.masking类有自定义display样式，可能需要调整优先级。

方案2：访问nativeElement前做空值检查（更严谨） #

如果必须用*ngIf（比如需要销毁元素节省性能），那所有用到#Mask1的方法里，都要先判断元素是否存在：
假设你的TS里有这样的代码：

@ViewChild('Mask1') mask1Element: ElementRef;

那在操作元素的方法中添加检查：

onResizePM(event: Event) {
    // 先判断元素是否存在
    if (!this.mask1Element?.nativeElement) return;
    
    // 原来的逻辑代码
    // ...
}

handlePrivacyMousedown(event: MouseEvent) {
    if (!this.mask1Element?.nativeElement) return;
    // ...
}

额外提示 #

• 你给div加的[attr.disabled]="disabled"是无效的，div元素本身不支持disabled属性，这个可以直接删掉。
• 确保在en_privacy方法执行后，所有依赖#Mask1的操作都能感知到元素的存在状态，避免在元素销毁后调用相关方法。

内容的提问来源于stack exchange，提问作者himani sharma