您的位置：首页 > 编程技术 > js  >  angular父子组件通信详解

angular父子组件通信详解

 更新时间：2021年12月22日 23:11  点击：915 作者：桐溪漂流

用到的api

Input - 子组件中定义可接受的属性，可以用来父组件给子组件传递数据

Output - 子组件中定义输出的属性，该属性需要是 EventEmitter 的事件类型，用来通知父组件做出相应的操作

EventEmitter - 用在带有 @Output 指令的组件中，以同步或异步方式发出自定义事件，并通过订阅实例来为这些事件注册处理器。

简单的例子

列表渲染子组件，点击子组件通知父组件进行操作

person.ts

export interface Person {
  name: string;
  age: number;
  sex: string;
}

父组件

import { Component, OnInit } from '@angular/core';
import { Person } from './person';
@Component({
  selector: 'app-comp-parent',
  template: `
    <app-comp-child
      *ngFor="let person of personList"
      (itemClick)="onItemClick($event)"
      [data]="person"
    ></app-comp-child>
  `,
})
export class CompParentComponent implements OnInit {
  personList: Person[] = [
    { name: '张三', age: 21, sex: '男' },
    { name: '李四', age: 25, sex: '男' },
    { name: '李莉', age: 20, sex: '女' },
  ];
  constructor(){ }
  ngOnInit(): void { }
  onItemClick(item: Person){
    console.log('click-person: ', item);
  }
}

子组件

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { Person } from './person';
@Component({
  selector: 'app-comp-child',
  template: `
    <div (click)="itemClick.emit(data)">
      Name: {{ data.name }}
      Age: {{ data.age }}
      Sex: {{ data.sex }}
    </div>
  `,
})
export class CompChildComponent implements OnInit {
  @Input() data!: Person;
  @Output() itemClick = new EventEmitter();
  constructor(){ }
  ngOnInit(): void { }
}

效果

效果图

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注猪先飞的更多内容!

原文出处：https://blog.csdn.net/qq564280420/article/details/121959412

[!--infotagslink--]

相关文章

  • Angular性能优化之第三方组件和懒加载技术

    这篇文章主要介绍了Angular性能优化之第三方组件和懒加载技术，对性能优化感兴趣的同学，可以参考下...2021-05-11

  • PC蓝牙通信C#代码实现

    这篇文章主要为大家详细介绍了PC蓝牙通信C#代码实现，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-06-25

  • C#串口通信程序实例详解

    在.NET平台下创建C#串口通信程序，.NET 2.0提供了串口通信的功能，其命名空间是System.IO.Ports,创建C#串口通信程序的具体实现是如何的呢？让我们开始吧...2020-06-25

  • Angular利用HTTP POST下载流文件的步骤记录

    这篇文章主要给大家介绍了关于Angular利用HTTP POST下载流文件的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者使用Angular具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧...2020-07-26

  • Angular处理未可知异常错误的方法详解

    这篇文章主要给大家介绍了关于Angular如何处理未可知异常错误的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-01-17

  • 使用Angular CDK实现一个Service弹出Toast组件功能

    本文主要写用cdk实现一个简单的Toast组件，使用的是cdk中的overlay模块，需要手动安装环境，具体安装方法及相关实现代码跟随小编一起看看吧...2021-07-28

  • android实现线程间通信的四种常见方式

    线程通信相信大家都不陌生了，但是你知道几种方法呢，本文主要介绍了android实现线程间通信的四种常见方式，分享给大家，需要的朋友们下面随着小编来一起学习学习吧...2021-05-13

  • AngularJS的ng-click传参的方法

    本篇文章主要介绍了AngularJS的ng-click传参的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧 ...2017-06-24

  • 详解vue组件之间的通信

    这篇文章主要介绍了vue组件之间的通信，帮助大家更好的理解和学习前端的相关知识，感兴趣的朋友可以了解下...2020-08-30

  • Angular实现form自动布局

    这篇文章主要介绍了Angular实现form自动布局的相关资料，以代码片段的形式分析了Angular实现form自动布局的实现方法，感兴趣的小伙伴们可以参考一下...2016-02-01

  • ionic+AngularJs实现获取验证码倒计时按钮

    本篇文章主要介绍了ionic+AngularJs实现获取验证码倒计时按钮，具有一定的参考价值，有兴趣的可以了解一下。...2017-04-27

  • 详解JavaScript的AngularJS框架中的作用域与数据绑定

    这篇文章主要介绍了JavaScript的AngularJS框架中的作用域与数据绑定,包括作用域的继承以及数据的单向和双向绑定等重要知识点,需要的朋友可以参考下...2016-03-07

  • 详解Vue 非父子组件通信方法（非Vuex）

    本篇文章主要介绍了详解Vue 非父子组件通信方法（非Vuex），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧 ...2017-05-27

  • Angular ng-class详解及实例代码

    这篇文章主要介绍了Angular ng-class的知识，并整理了相关资料，有兴趣的小伙伴可以参考下...2016-10-03

  • react之组件通信详解

    本篇文章主要介绍了React组件通信详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2021-10-15

  • 关于antd tree和父子组件之间的传值问题(react 总结)

    这篇文章主要介绍了关于antd tree 和父子组件之间的传值问题，是小编给大家总结的一些react知识点，本文通过一个项目需求实例代码详解给大家介绍的非常详细，需要的朋友可以参考下...2021-06-02

  • 详解React中组件之间通信的方式

    这篇文章主要介绍了React中组件之间通信的方式,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-07-27

  • AngularJS中实现用户访问的身份认证和表单验证功能

    这篇文章主要介绍了AngularJS中实现用户访问的身份认证及表单验证功能的方法,Angular是Google开发的一款浏览器端的高人气JavaScript框架,需要的朋友可以参考下...2016-04-23

  • C#串口通信实现方法

    这篇文章主要介绍了C#串口通信实现方法,详细讲述了C#串口通信所涉及的数据接收与发送方法,以及相关的线程调用方法,是非常典型的应用,需要的朋友可以参考下...2020-06-25

  • Angular CLI发布路径的配置项浅析

    这篇文章主要给大家介绍了关于Angular CLI发布路径的配置项的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-03-28