Angular2中的ViewChild是什么？

Question

从官方文档.答ViewChild:

Configures a view query.

View queries are set before the ngAfterViewInit callback is called.

解释是非常小的,我仍然不太明白它用于什么.

从我发现的博客中考虑这个例子.

带走对@ViewChild(TodoInputCmp)内部代码没有影响TodoInputCmp

有人可以给我一些见解吗？

谢谢

Answer 1

它提供了视图中元素或组件的引用:

@Component({
  ...
  directives: [SomeComponent],
  template: `
  <div><span #myVar>xxx</span><div>
  <some-comp></some-comp>`
})
class MyComponent {
  @ViewChild('myVar') myVar:ElementRef;
  @ViewChild(SomeComponent) someComponent:SomeComponent;

  ngAfterViewInit() {
    console.log(this.myVar.nativeElement.innerHTML);
    console.log(this.someComponent);
  }
}

之前没有初始化变量 ngAfterViewInit()

Answer 2

该ViewChild装饰是用来访问子组件,在模板中找到,这样您就可以访问它的属性和方法.

Answer 3

@viewchild()

在Angular中，我们通过将普通HTML与其他Angular组件结合来定义组件的模板。在视图（html文件）中，我们可以通过以下方式定义模板引用变量：

<input type="text" #firstNameInput>
<myDefaultComponent #reference></myDefaultComponent>

使用模板引用变量，组件和html元素通常仅在视图内部可用。但是，当我们想注入组件或html元素的引用并将它们注入到我们的模型（ts文件组件类）中时，可以使用@viewchild()它来实现此目的。

我们通过@viewchild()以下方式使用装饰器：

  @ViewChild('myReference') myClassproperty;

@viewchild()根据引用的放置位置，using 将执行不同的操作：

1. 将引用放置在html组件上时，它将html DOM组件作为类属性（在此示例中为myClassproperty）注入模型中。然后，我们可以使用this.myClassproperty
2. 将参考放置在角度组件上时，它将把Angular组件作为类属性（在本示例中为myClassproperty）注入模型中。然后，我们可以使用this.myClassproperty

因此@viewchild()，将其他子组件或HTML子元素注入模型类非常方便。现在，父组件可以根据其子组件和html元素的行为做出反应，这是经常需要的功能。

警告：

另外需要注意的重要的是，你应该把@viewchild()在一个ngAfterViewInit()钩。这是因为渲染后只能访问视图中的元素。

Answer 4

Angular 有两个部分，一个是视图，另一个是组件或处理视图数据和事件的代码。在组件中很多时候我们想引用视图元素的实例，这就是“ViewChild”的帮助所在。

“ViewChild”有助于在它所连接的组件中引用视图对象。“ViewChild”引用一个对象，而“ViewChildren”引用集合。

例如，在下面的代码中，左侧有视图，右侧有组件（后面的代码），您可以看到如何使用 viewchild 来引用视图元素，如 Div1 、 Comp2 等。

您还可以查看这个 youtube 视频，该视频以更清晰的方式以角度解释了viewchild。