Question

来自官方documentation。一个ViewChild：

Configures a view query.

View queries are set before the ngAfterViewInit callback is called.

解释非常简短，我仍然不太明白它用于什么。

从我找到的博客中考虑这个example。

取消@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()会执行不同的操作：

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

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

注意：

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

Answer 4

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

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

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

您还可以查看这段YouTube视频，以更清晰的方式介绍viewchild in angular。

Answer 5

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

common.component.html

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

现在在ngOnInit（）之后创建一个新函数，如下所示： landingPage.component.html

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

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

现在进入主要标签组件。
common.component.ts

现在声明。

  @ViewChild(landingPageComponent ) landingtab: landingPageComponent ;

ageingTabClick(_type) {  

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


      default:
        break;
    }

现在开始添加所需的补足成分。

Angular2中的ViewChild是什么？

5 个答案:

`@viewchild()`