2

在 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在模板中出现元素的可能性，但我遇到了一些不可避免的罕见情况。

非常感谢任何建议。

4

1 回答 1

1

如果可能的话，尽量消除或尽量减少使用ElementRef. ElementRef文档状态：

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

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

如果 anElementRef是不可避免的，并且在某些情况下ElementRefwill 是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;
于 2019-08-07T03:35:09.753 回答