24组件之间的通信(本地变量)
父组件不能使用数据绑定来读取子组件的属性或调用子组件的方法。但可以在父组件模板里,新建一个本地变量来代表子组件,然后利用这个变量来读取子组件的属性和调用子组件的方法。
①在父组件去调用子组件时,可以指定 # 加上变量的名称 <son #mySon></son>
②在父组件中,通过 mySon 得到组件类的实例
<div>
<son #mySon></son>
<p></p>{{mySon.count}}</p> //如果父组件中的p 标签,需要显示子组件类中某个变量,比如count
<button (click)="handleClick(mySon)" ></button> //如果想在JS中操作子组件,方案①(events up)
</div>
方案②:父组件通过ViewChild得到子组件的实例方法
准备:<son #mySon></son>
引入:import { ViewChild } from '@angular/core';
取值:@ViewChild (' mySon ') sonInstance;
使用:this.sonInstance.***/***()
方案②:通过ViewChild