Angular2父子组件之间数据传递：@ViewChild获取子组件（属性、方法）

时间：2024-05-19 08:14:20
原文出处：http://blog.****.net/long328583644/article/details/74894446

我们在《Angular2父子组件之间数据传递：局部变量获取子组件》讲到过（如果有不懂的，可以先去看看），通过在子组件模版上设置局部变量的方式获取子组件的成员变量，但是有一个限制，必须在父组件的模版中设置局部变量才能够获取到子组件成员。那有没有办法实现不依赖于局部变量获取子组件成员呢？ 答案：肯定是有的，接下来我们讲下通过@ViewChild来实现！


淡描@ViewChild 

@ViewChild的作用是声明对子组件元素的实例引用，意思是通过注入的方式将子组件注入到@ViewChild容器中，你可以想象成依赖注入的方式注入，只不过@ViewChild不能在构造器constructor中注入，因为@ViewChild会在ngAfterViewInit()回调函数之前执行。


两种引用方式：“子组件实例引用” 和 "字符串"引用
@VIewChild提供了一个参数来选择将要引入的组件元素，可以是一个子组件实例引用， 也可以是一个字符串(两者的区别，后面会讲)
@ViewChild(ChildenComponent) child: ChildenComponent; //子组件实例引用
@ViewChild("child") child2; //字符串

下面我们来介绍一下两种用法。


1、当传入的是一个子组件实例引用

childenConponetn.ts（子组件）

import {Component} from '@angular/core';

@Component({
selector: 'app-childen',
  templateUrl: './childen.component.html',
  styleUrls: ['./childen.component.css']
})
export class ChildenComponent {
fun1() {
alert('子组件方法');
  }
}

1、定义了一个类方法fun1()，提供给父组件调用


parentComponent.ts（父组件）

import {Component, ViewChild} from '@angular/core';
import {ChildenComponent} from './childen/childen.component'

@Component({
selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})

export class ParentComponent {
  @ViewChild(ChildenComponent) child: ChildenComponent;

  OnClick() {
this.child.fun1();
  }
}

1、这里传入一个子组件实例引入，定义了一个变量child接收

2、定义了Onclick()方法，用于页面触发点击事件，模拟调用子组件中的方法


parentComponetn.html（父组件模版）

<div class="parent_div">
  <p>父组件</p>
  <div>
    <input type="button" value="调用子组件方法" (click)="OnClick()">
  </div>
  <!---子组件指令 start-->
  <app-childen></app-childen>
  <!---子组件指令 end-->
</div>

1、父组件模版中input绑定了一个click点击事件，页面触发点击调用OnClick()方法

最终效果如下：

Angular2父子组件之间数据传递：@ViewChild获取子组件（属性、方法）



2、当传入的是一个字符串

parentComponent.ts（父组件）

import {Component, ViewChild} from '@angular/core';

@Component({
selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})

export class ParentComponent {

  @ViewChild('myChild') child;

  OnClick() {
this.child.fun1();
  }
}

1、@ViewChild传入一个字符串myChild，变量child接收。其它不变


parentComponent.html（父组件模版）

<div class="parent_div">
  <p>父组件</p>
  <div>
    <input type="button" value="调用子组件方法" (click)="OnClick()">
  </div>
  <!---子组件指令 start-->
  <app-childen #myChild></app-childen>
  <!---子组件指令 end-->
</div>

1、细心的你会发现这里在子组件模版中创建了一个局部变量#myChild，父组件中的myChild字符串解释为一个选择器。也就是一个元素包含模版局部变量#myChild，这就是与第一种方式唯一不同的地方，这里弥补了 《Angular2父子组件之间数据传递：局部变量获取子组件》只能在模版中使用子组件引入的缺陷

最终效果跟上面结果一样



最后说一句

关于@ViewChild还有很多东西可说，这里我不做多说，我会在以后的文章中，单独写一遍来讲，欢迎大家关注


相关文章