Angular позволяет вам создавать базу повторно используемых компонентов, установленных в компонуемые представления. Это создает иерархию родительско-дочерних отношений для компонентов, составляющих любое данное представление. Отсюда мы получаем парадигму компонента без состояния. React устроен так же. Самый верхний компонент (родительский) содержит все данные для представления. Он организует поток данных вниз к дочерним компонентам и обрабатывает события, инициированные дочерними компонентами.

Предполагая, что ваши компоненты отслеживают события, предоставляя представлениям богатые функциональные возможности, эти компоненты можно создавать, не зная точно, какие данные они собираются предоставить им во время выполнения. Поскольку они могут быть спроектированы как динамические и компонуемые, компоненты не должны знать точный контекст, в котором они будут использоваться. Данных для них нет. Они без гражданства. Он передается им каждый раз от родителя. Узнайте о них больше из Todd Motto.

Но как родительские функции уведомляются о событиях, которые прослушивают их дочерние компоненты? Я не родитель, поэтому я не буду пытаться сделать из этого глупую шутку. Пожалуйста. Вот тут-то и появляется ViewChild.

Итак, здесь мы привязали функцию к событию нажатия нашей кнопки в шаблоне компонента. Эта функция вызывает метод addRow() нашего экземпляра сетки Kendo UI. Теперь с ViewChild у нас есть доступ ко всем общедоступным методам компонентов, которые мы используем в родителях. Это позволяет нам передавать данные и получать данные из наших компонентов, оставляя их без состояния.

Что делать, если один и тот же компонент используется несколько раз в одном и том же родительском компоненте?