ViewChild - это компонент, директива или элемент как часть шаблона. Если мы хотим получить доступ к дочернему компоненту, директиве, элементу DOM внутри родительского компонента, мы используем декоратор @ViewChild () в Angular.
Чтобы понять это, предположим, что у нас есть два компонента: дочерний и родительский. Поскольку дочерний компонент может находиться внутри родительского компонента, доступ к нему можно получить как @ViewChild.
В приведенном выше коде мы импортировали декоратор @ViewChild, а затем импортировали обработчик жизненного цикла AfterViewInit и реализовали его. Теперь, чтобы изменить значение свойства, мы можем использовать только что созданное представление, например:
ngAfterViewInit () {
this.chviewChild.message = «Измененное значение View Child»
}
Будет выведено значение Измененное значение View Child, но будет выдана ошибка «Выражение было изменено после последней проверки».
Для обработки этой ошибки мы используем обнаружение изменений с помощью ChangeDetectorRef.
Здесь мы импортировали ChangeDetectorRef из ‘@ angular / core’ и внедрили его в конструктор. Мы также вызвали метод detectChanges ().
Это было для одного дочернего элемента, расположенного внутри шаблона компонента, но что в случае, когда у нас есть несколько ссылок на дочерний элемент?
Именно тогда в игру вступает @ViewChildren.
Изменение шаблона,
Наконец, пометив ссылку ViewChildren типом QueryList,
Теперь мы можем обновить значение свойства сообщения, используя Viewchildren внутри ловушки жизненного цикла ngAfterViewinit () следующим образом:
this.chviewChildren.forEach ((item) = ›{item.message =‘ Обновлено значение ’;});
Давайте теперь посмотрим на окончательный код:
Это дает нам результат в виде:
