Какая польза от @ViewChild, если мы не можем изменять свойства или манипулировать ими из родительского компонента?

Question

Я получил 2 компонента - дома и о.В оба я ввожу третий (детский) компонент - сердца.Теперь я манипулирую значением свойства age в сердцах (по умолчанию установлено значение '23') с помощью @viewChild из 'home component'.Я вижу, что значение кажется измененным с точки зрения «домашнего компонента», а не «о компоненте».

Мои вопросы:

1. Как изменяется значение в первом компоненте, но не во втором - это означает модальноеили значение не изменяется в «компоненте сердец» (поэтому оно не обновляется в компоненте «О программе»), но как же это изменится на «33» в домашнем компоненте?

2. Если значение «свойства дочернего компонента» не может быть изменено через родительский элемент с помощью @viewChild - тогда какой смысл использовать доступ из родительского элемента.Почему бы тогда напрямую не использовать декоратор @input - он лучше работает.Не так ли?

1 - app.component.html

<app-home></app-home>
<app-about></app-about>

2a - home.component.html

<app-heart #ref1></app-heart>
<button (click)="alpha()">click</button>

2b - home.component.ts

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

@ViewChild('ref1') ref1: HeartComponent;

alpha(){
  this.ref1.age = 33;
}

3 - about.component.html

<app-heart></app-heart>

4 - heart.component.ts

age = 23;

Снимок (при нажатии кнопки)

Answer 1

У вас есть два разных экземпляра <app-heart></app-heart>, поэтому они сохранят свои собственные состояния, что означает, что изменение одного из экземпляров не влияет на другой.

То же самое происходит, если вы используете @Input() -decorator, значение обновляется только в том экземпляре, на котором вы его используете.

При использовании декоратора @Input() вам не нужно явно задавать желаемое значение, как при использовании декоратора @ViewChild().

Вы также разъединяете отношения между компонентамикогда вы используете @Input() вместо @ViewChild()