angular - 何时使用@ViewChild、@Input 和@Output？

Question

什么时候使用 ViewChild、Input 和 Output？既然可以使用 ViewChild 实现类的所有属性，那么为什么要使用 Input 和 Output。

在简单的场景中，输入和输出是最好的。但是我有 4 到 5 层深层次的组件。在那种情况下，我应该使用 ViewChild 还是使用 Input 将数据传输到最后一个组件并使用 Output 将事件返回到顶级组件？

它们三者如何影响应用程序的性能？

Answer 1

@ViewChild:
我们可以使用 viewchild 访问 native 元素属性。例如:如果我想在我们的组件呈现时实现点击事件，那么我必须使用 @ViewChild。

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

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

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

HTML

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

@输入如果我们有两个组件并且都有父子关系，并且我们想在这种情况下将数据从父级传递给子级，我们可以使用 @Input。

@输出如果我们有两个组件并且都有父子关系，并且我们想将数据从子组件传递到父组件，那么在这种情况下我们可以使用 @Output。