Когда использовать @ViewChild, @Input и @Output?

Question

Когда использовать ViewChild, Input и Output? Поскольку можно получить все свойства класса с помощью ViewChild, тогда зачем использовать Input и Output.

В простом сценарии лучше всего использовать ввод и вывод. Но у меня есть 4-5 уровней глубокой иерархии компонентов. В этом случае я должен использовать ViewChild или для перемещения данных к последнему компоненту с помощью Input и вернуть событие на верхний компонент с помощью Output?

Как они влияют на производительность приложения?

Answer 1

@ ViewChild
Мы можем использовать viewchild для доступа к собственным свойствам элемента. пример: если я хочу реализовать событие click при рендеринге нашего компонента, тогда я должен использовать @ViewChild.

@ViewCild('refDiv'): refDiv = ElementRef;

ngOnInit() {
   this.refDiv.nativeElement.click();
}

divClick() {
  console.log('div is clicked!!!');
}

HTML

<div #refDiv (click)="divClick()"> 
</div>

@ Input Если у нас есть два компонента, и оба имеют отношения родитель-потомок, и мы хотим передать данные от родителя к потомку в этом случае, мы можем использовать @Input.

@ выход Если у нас есть два компонента и оба имеют родительские и дочерние отношения, и мы хотим передать данные от дочернего к родительскому, то в этом случае мы можем использовать @Output.

Answer 2

Для родительских дочерних компонентов я бы использовал Input и Output.Но на 2 и более уровнях я бы использовал Услуги.И тогда вы можете написать методы установки и получения.Все остальное просто сложно поддерживать, и у него есть большие шансы на ошибки