Angular：如何处理 null ElementRef？答案

【问题标题】：Angular: How to handle a null ElementRef?Angular：如何处理 null ElementRef？
【发布时间】：2019-12-14 13:21:38
【问题描述】：

在一个 Angular 组件中，我以一种非常复杂的方式显示实时数据，需要使用 ElementRef 来支持 UI 交互的各种用途。

this.elRef.nativeElement.querySelector('.my-element')

因此，当以这种方式引用元素时，我遇到了一些罕见的用例，会引发 null 错误，因为该元素在 DOM 中尚未可访问，或者由于实时数据而先前已被删除*ngFor 内的更新。

为了防止出错，我正在检查 null 的原生元素：

if(this.elRef.nativeElement.querySelector('.my-elment') != null) {
  // reference or set style on this element
}

这很好用，但有更好的方法吗？结果，我在整个组件中使用了很多 if 语句。

我已尽一切努力避免接触 DOM，并避免在我的模板中遇到元素可能为 null 的可能性，但我遇到了一些无法避免的罕见情况。

非常感谢任何建议。

【问题讨论】：

标签： angular elementref

【解决方案1】：

如果可能，请尝试消除或尽量减少使用ElementRef。 ElementRef 文档状态：

当需要直接访问 DOM 时，将此 API 用作最后的手段。改用 Angular 提供的模板和数据绑定。或者，您可以查看Renderer2，它提供了即使不支持直接访问本机元素也可以安全使用的 API。

依赖直接 DOM 访问会在您的应用程序和渲染层之间创建紧密耦合，这将导致无法将两者分开并将您的应用程序部署到 Web Worker 中。

如果ElementRef 是不可避免的，并且在某些情况下ElementRef 将是null，那么您能做的最好的事情（不增加复杂性）就是使用一点语法糖和重构。

1.使用短变量引用

const myEl = this.elRef.nativeElement.querySelector('.my-elment');
    
if (myEl != null) { }

2。使用notNull() 函数使代码更清晰，并将需要ElementRef 的逻辑重构为子例程。

export function notNull(x: any): boolean {
  return x != null
}


const myEl = this.elRef.nativeElement.querySelector('.my-elment');
    
notNull(myEl) ? doSomething(myEl) : false;

【讨论】：