首页 > 其他 > 详细

24组件之间的通信(本地变量)

时间:2020-01-22 10:04:30      阅读:84      评论:0      收藏:0      [点我收藏+]

父组件不能使用数据绑定来读取子组件的属性或调用子组件的方法。但可以在父组件模板里,新建一个本地变量来代表子组件,然后利用这个变量来读取子组件的属性和调用子组件的方法。

①在父组件去调用子组件时,可以指定 # 加上变量的名称 <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

技术分享图片

 

技术分享图片

 

 技术分享图片

24组件之间的通信(本地变量)

原文:https://www.cnblogs.com/shanlu0000/p/12227631.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!