typescript Angular2 中的 ViewChild 是什么？

What is ViewChild in Angular2?

提问by testing

From the official documentation. A ViewChild:

来自官方文档。答ViewChild：

Configures a view query.

View queries are set before the ngAfterViewInit callback is called.

The explanation is very minimal and I still don't quite understand what is it used for.

解释非常少，我仍然不太明白它的用途。

Consider this examplefrom a blog I found.

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

Taking away the @ViewChild(TodoInputCmp)have no effect on the code inside TodoInputCmp

去掉@ViewChild(TodoInputCmp)对里面的代码没有影响TodoInputCmp

Can someone give me some insight?

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

Thanks

谢谢

回答by Günter Z?chbauer

It provides a reference to elements or components in your view:

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

@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);
  }
}

The variables are not initialized before ngAfterViewInit()

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

回答by rgvassar

The ViewChilddecorator is used to gain access to a child component, found in the template, so that you can access its properties and methods.

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

回答by Willem van der Veen

@viewchild()

@viewchild()

In Angular we define a template of a component by combining plain HTML with other Angular components. In the view (html file) we can define template reference variable in the following manner:

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

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

Using template reference variables the components and html elements are usually only available inside the view. However, when we want to inject references of the component or html element and inject them into our model (ts file component class) we can use @viewchild()in order to achieve this.

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

We use @viewchild()decorator in the following manner:

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

  @ViewChild('myReference') myClassproperty;

Using @viewchild()will do different things based on where the reference was placed:

使用@viewchild()将根据引用的位置做不同的事情：

1. When the reference was placed on a html component it will inject the html DOM componentinto the model as a class property (myClassproperty in this example). We then can access this property in the model using this.myClassproperty
2. When the reference was placed on a angular component it will inject the Angular componentinto the model as a class property (myClassproperty in this example). We then can access this property in the model using this.myClassproperty

1. 当引用放置在 html 组件上时，它会将html DOM 组件作为类属性（在本例中为 myClassproperty）注入模型中。然后我们可以使用模型访问这个属性this.myClassproperty
2. 当引用放置在 angular 组件上时，它会将Angular 组件作为类属性（在本例中为 myClassproperty）注入模型中。然后我们可以使用模型访问这个属性this.myClassproperty

Thus @viewchild()is very convenient to inject other child components or child HTML elements into the model class. The parent component now can react based on the behaviour of its child components and html elements which is a feature that is often required.

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

Caveat:

警告：

Also important to note is that you should put @viewchild()in an ngAfterViewInit()hook. This is because you can only have access to the elements in the view after they are rendered.

还需要注意的是，您应该放入@viewchild()一个ngAfterViewInit()钩子。这是因为您只能在渲染后才能访问视图中的元素。

回答by Shivprasad Ktheitroadala

Angular have two parts one is the view and the other is component or the code which handles the view data & events. In component many times we would like to refer instance of view elements , that's where “ViewChild” helps.

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

“ViewChild” helps to reference view objects in the component to which it is connected. “ViewChild” references one object while “ViewChildren” references collection.

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

For example in the below code at the left hand side we have view and the right hand side we have the component ( code behind) , you can see how viewchild is used to refer the view elements like Div1 , Comp2 and so on.

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

You can also check out this youtube video which explain viewchild in angularin more crisp way.

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

回答by Devashish Maurya

@viewchild is used to display many component in tabs view . Using this method services of particular component will be called by individually.

@viewchild 用于在选项卡视图中显示许多组件。使用此方法将单独调用特定组件的服务。

common.component.html

common.component.html

  <li (click)='ageingTabClick("dailysummary")' ><a href="#tab1" role="tab" data-toggle="tab">Daily Order Status</a>

Now make a new function after ngOnInit() ,
like: landingPage.component.html

现在在 ngOnInit() 之后创建一个新函数，
例如： landingPage.component.html

  ngOnInit() {
    this.initTab(); //call the init function
  }

  initTab(){
    this.getdata(); //calling of any function
  }

now come to main tabs component.
common.component.ts

现在来到主选项卡组件。
common.component.ts

Now declare .

现在声明。

  @ViewChild(landingPageComponent ) landingtab: landingPageComponent ;

ageingTabClick(_type) {  

    switch (_type) {
      case 'dailysummary':
        this.fttxjourneytab.initTab();
        break;


      default:
        break;
    }

Now start adding compoonent as much you want.

现在开始添加你想要的组件。