时间戳

首页 > 解决方案 > 何时使用@ViewChild、@Input 和@Output？

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

问题描述

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

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

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

标签： angularinputoutputviewchild

解决方案

@ViewChild：
我们可以viewchild用来访问原生元素属性。例如：如果我想在渲染我们的组件时实现点击事件，那么我必须使用@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 如果我们有两个组件并且都具有父子关系，并且我们想将数据从子节点传递给父节点，那么在这种情况下我们可以使用@Output.

推荐阅读