angular父子组件的传值方法

最新推荐文章于 2024-06-19 15:55:10 发布

lichengcan

最新推荐文章于 2024-06-19 15:55:10 发布

阅读量437

点赞数 1

分类专栏： angular 文章标签： angular 父子组件传值

本文链接：https://blog.csdn.net/lichengcan/article/details/100857378

版权

angular 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

父子组件的传值方法：

在前端利用点击事件获取id值：

<a (click)="onclick1(root.cate_id)" (mousemove)="Mousemove1(root.cate_id,root.list)" (mouseleave)="Mouseleave1(root.cate_id)" class="said-bar-classification">
  {{root.cate_name}} <small>  <!--( {{root.products_count}} ) --></small>
  <span class="triangle"></span>
</a>

在对应的ts文件中利用@Output()方法来发送：如：@Output() onCagegoryChange = new EventEmitter<any>();来发送

然后在点击事件中发送出去

onclick1(cate_id: number) {
  this.onCagegoryChange.emit(cate_id);
}

再调用该子组件的父级组件中获取：

<app-categorymenu [categories]="categories"  (onCagegoryChange)="onCagegoryChange($event)"></app-categorymenu>

在父级的ts文件中调用获取的方法

onCagegoryChange($event) {
  console.log('子组件传入的类别: ' + $event);
  console.log($event);
  this.cateid = $event;
  this.pageNum=1; //默认设置
  this.pageSize=10; //默认设置
  this.getGoods();
}

获取到了传过来的值。