Можно ли использовать getElementById в Angular?

Question

Я просматривал документацию Angular и увидел следующий фрагмент кода.В глубине души я подумал, что вспомнил, что использование document.getElementById() в Angular не одобряется, и даже использование ElementRefs не рекомендуется (для предотвращения атак XSS).Если они действительно не приветствуются, какова наилучшая практика для создания Наблюдаемой для событий на конкретном элементе?

от Документация угловых наблюдаемых

import { fromEvent } from 'rxjs';
import { ajax } from 'rxjs/ajax';
import { map, filter, debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';

const searchBox = document.getElementById('search-box');  // <-- Is this OK?

const typeahead = fromEvent(searchBox, 'input').pipe(
  map((e: KeyboardEvent) => e.target.value),
  filter(text => text.length > 2),
  debounceTime(10),
  distinctUntilChanged(),
  switchMap(() => ajax('/api/endpoint'))
);

Answer 1

Я бы предложил использовать угловые ViewChild для взаимодействия с компонентами из вашего шаблона.

ViewChild - декоратор API

Декоратор свойств, который настраивает запрос представления.Детектор изменений ищет первый элемент или директиву, соответствующую селектору в представлении DOM.Если DOM представления изменяется, и новый дочерний элемент соответствует селектору, свойство обновляется.

Например:

import {Component, Directive, Input, ViewChild} from '@angular/core';

@Directive({selector: 'pane'})
export class Pane {
  @Input() id !: string;
}

@Component({
  selector: 'example-app',
  template: `
    <pane id="1" *ngIf="shouldShow"></pane>
    <pane id="2" *ngIf="!shouldShow"></pane>

    <button (click)="toggle()">Toggle</button>

    <div>Selected: {{selectedPane}}</div>
  `,
})
export class ViewChildComp {
  @ViewChild(Pane, {static: false})
  set pane(v: Pane) {
    setTimeout(() => { this.selectedPane = v.id; }, 0);
  }
  selectedPane: string = '';
  shouldShow = true;
  toggle() { this.shouldShow = !this.shouldShow; }
}

Вот хороший пример для Понимание ViewChildren, ContentChildren и QueryList в Angular

Answer 2

Это плохой подход к ручной работе с DOM в угловых.В угловых приложениях вы всегда должны использовать угловые методы для рендеринга страницы.Поскольку в большинстве случаев в будущем вам потребуется обеспечить рендеринг на стороне сервера, чтобы приложение было удобным для Google.Но движок Angular SSR (Angular Universal) на бэкэнде эмулирует только объект XHR, но не методы DOM.

Answer 3

Использование реактивной формы, вероятно, лучше подходит

//HTML:
<input #search [formControl]="search"/>

//Component
search=new FormControl('')
search.valueChanges.pipe(
  filter(text => text.length > 2),
  debounceTime(10),
  distinctUntilChanged(),
  switchMap(() => ajax('/api/endpoint'))
).subscribe();