Angular: как обрабатывать null ElementRef?

В компоненте Angular я отображаю данные в реальном времени очень сложным способом, который требует использования ElementRef для различных целей, поддерживающих взаимодействие с пользовательским интерфейсом.

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
person DevMike    schedule 06.08.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Если возможно, постарайтесь исключить или свести к минимуму использование ElementRef. Состояние документов ElementRef:

Используйте этот API в крайнем случае, когда необходим прямой доступ к DOM. Вместо этого используйте шаблоны и привязку данных, предоставляемые Angular. В качестве альтернативы вы можете взглянуть на Renderer2, который предоставляет API, который можно безопасно использовать даже при прямом доступе. для нативных элементов не поддерживается.

Использование прямого доступа к DOM создает тесную связь между вашим приложением и слоями рендеринга, что делает невозможным их разделение и развертывание вашего приложения в веб-воркере.

Если 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;
person Christopher Peisert    schedule 07.08.2019