Angular: 如何处理空 ElementRef？

Question

在 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 的可能性，但我仍然坚持一些不可避免的罕见情况。

非常感谢任何建议。

Answer 1

如果可能，尽量避免或尽量减少使用 ElementRef。 ElementRef 文档状态：

Use this API as the last resort when direct access to DOM is needed. Use templating and data-binding provided by Angular instead. Alternatively you can take a look at Renderer2 which provides API that can safely be used even when direct access to native elements is not supported.

Relying on direct DOM access creates tight coupling between your application and rendering layers which will make it impossible to separate the two and deploy your application into a 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;

Angular: 如何处理空 ElementRef？

Angular: How to handle a null ElementRef?

angular

elementref