Как следить за элементом в компоненте Angular?

Question

[Николай Семенов]

Ребята всем привет!

Нужно начать постоянно следить за элементом компонента, как только это компонент построится.
нужно отслеживать все время есть ли в нем дети

Помогите пожалуйста

Answer 1

[Евгений Калибров]

Каким образом в DOM элементе ни с того ни с сего может что-то измениться? Что бы в нём что-то изменилось должны произойти какие-либо события (События от устройств ввода, асинхронные вызовы по таймеру, ответ XHR запроса от сервера, запрос от сервера через сокеты и т.п.) так вот, вам следует следить именно за этими событиями, а не за элементом.

Comments

[Demian Smith]

Всё верно, бро. Автор вопроса, наверное, еще не до конца врубился в суть ангуляра, раз интересуется тем как следить за элементом. Обычно такие вопросы возникают когда разметку, построенную ангуляром, начинают модифицировать не-анугуляром, а, например, плагином для джейквери. Этот путь гарантированно ведёт к провалу всей операции.

[Евгений Калибров]

Demian Smith, ну да, и то более менее уважающий себя джейквери плагин, бросит событие когда что-то меняется)

Answer 2

[Роман Петерсон]

Как написали выше, чаще всего следить надо не за самим элементом а за данными, которые на него влияют. Но если всё-таки надо (например если нужно дождаться загрузки внутренностей стороннего компонента), то можно сделать костыль - например, по таймауту опрашивать нативный элемент:

1) В темплейте дайте элементу id с решёткой:
< div #myElement >...< /div >

2) В коде компонента получите доступ к этому элементу:
@ViewChild('myElement')
public myElement: ElementRef;

3) По таймеру проверяйте какое-нибудь свойство у JS-модели элемента (его размеры или наличие у него дочерних элементов):
let rect = this.container.nativeElement.getBoundingClientRect();
if (rect.width > 0) {
console.log('Что-то изменилось!');
}