angular父子组件通信详解

目录
  • 用到的api
  • 简单的例子
    • person.ts
    • 父组件
    • 子组件
    • 效果
  • 总结

用到的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 { }
}

效果

总结

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

赞 (0)

相关推荐

  • Angular2 父子组件数据通信实例

    如今的前端开发,都朝组件式开发模式靠拢,如果使用目前最流行的前端框架Angular和React开发应用,不可避免地需要开发组件,也就意味着我们需要考虑组件间的数据传递等问题,不过Angular 2已经为我们提供了很好的解决方案. 父组件和子组件 接触过面向对象编程的开发者肯定不会对父子关系陌生,在Angular 2中子组件存在于父组件"体内",并且父子组件可以通过一些渠道进行通讯. 父组件向子组件传入数据 – @Input 当我们着手开始开发一个组件时,第一件想到的应该就是为其传入数据

  • Angular 2父子组件之间共享服务通信的实现

    Angular 2父子组件之间共享服务通信的实现

    前言 如今的前端开发,都朝组件式开发模式靠拢,如果使用目前最流行的前端框架Angular和React开发应用,不可避免地需要开发组件,也就意味着我们需要考虑组件间的数据传递等问题,不过Angular 2已经为我们提供了很好的解决方案. 本文详细介绍了Angular2父子组件共享服务通信的相关内容,父子组件共享同一个服务,利用该服务实现双向通信,下面来看看详细的介绍: 第一步:定义服务 parentService.ts 1).这里用Injectable修饰这个类是一个服务,在其他用到地方只需要注入

  • Angular2 父子组件通信方式的示例

    Angular2 父子组件通信方式的示例

    Angular2官方文档对组件交互这块有详细的介绍-->文档--组件之间的交互.按文档介绍,组件间交互的方式一共有4种,包括: 通过输入型绑定把数据从父组件传到子组件(@Input decoration):子组件暴露一个EventEmitter属性(@Output decoration),当事件发生时,利用该属性emits向父组件发射事件. 父组件与子组件通过本地变量互动.(# var) 父组件调用@ViewChild. 父组件和子组件通过服务来通讯. 我在这里只总结.详细介绍3种我在项目中使用

  • angular父子组件通信详解

    angular父子组件通信详解

    目录 用到的api 简单的例子 person.ts 父组件 子组件 效果 总结 用到的api Input - 子组件中定义可接受的属性,可以用来父组件给子组件传递数据 Output - 子组件中定义输出的属性,该属性需要是 EventEmitter 的事件类型,用来通知父组件做出相应的操作 EventEmitter - 用在带有 @Output 指令的组件中,以同步或异步方式发出自定义事件,并通过订阅实例来为这些事件注册处理器. 简单的例子 列表渲染子组件,点击子组件通知父组件进行操作 pers

  • React中父子组件通信详解

    目录 父组件向子组件通信 存在期 父组件向子组件通信 在父组件中,为子组件添加属性数据,即可实现父组件向子组件通信.传递的数据可以分成两类 子组件是作为属性来接收这些数据的 第一类就是数据:变量,对象,属性数据,状态数据等等 这些数据发生改变,子组件接收的属性数据就发生了改变. 第二类就是方法:父组件可以向子组件传递属性方法,子组件接收方法,并可以在组件内执行,有两种执行方式 注意:父组件传给子组件的方法是不能执行的,执行了相当于将方法的返回值传递给子组件. 第一种 作为事件回调函数执行 参数默

  • Vue非父子组件通信详解

    Vue非父子组件通信详解

    组件是Vue核心的一块内容,组件之间的通信也是很基本的开发需求.组件通信又包括父组件向子组件传数据,子组件向父组件传数据,非父子组件间的通信.前两种通信Vue的文档都说的很清楚,但是第三种文档上确只有下面的几句 具体如何去实现却没有很详细的说明,于是自己试着进行了实现.先看下简单的通信效果: 就是点击了一个组件,另一个组件的数字递加. html如下: <div id="app"> <component-a></component-a> <com

  • vue2利用Bus.js如何实现非父子组件通信详解

    前言 大家应该都知道,vue2中废弃了$dispatch和$broadcast广播和分发事件的方法.父子组件中可以用props和$emit().如何实现非父子组件间的通信,可以通过实例一个vue实例Bus作为媒介,要相互通信的兄弟组件之中,都引入Bus,然后通过分别调用Bus事件触发和监听来实现通信和参数传递.下面话不多说了,来一起看看详细的介绍吧. Bus.js可以是这样 import Vue from 'vue' export default new Vue() 在需要通信的组件都引入Bus

  • vue3 非父子组件通信详解

    vue3 非父子组件通信详解

    目录 第一种方法 App.vue Home.vue HomeContent.vue 数据的响应式 修改响应式Property 总结 业务场景是,不是父子组件实现通信 文件目录 第一种方法 App.vue <template> <div> <Home></Home> <button @click="addName">增加名字</button> </div> </template> <sc

  • vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)

    vue中我们常常用到组件. 那么组件总体可以分为如下的几种关系. 父子组件, 爷孙组件, 兄弟组件. 这几种组件之间是如何通信的呢? 父子组件通信 根据vue中的文档可知, 组件的props属性用于接收父组件传递的信息. 而子组件想要向父组件传递信息, 可以使用$emit事件. 我们定义两个组件, 一个为父组件名为father, 另外一个为子组件child. 子组件通过props属性接收父组件传递的值, 这个值为fname, 是父组件的名字. 点击子组件的按钮, 触发toFather事件, 向父

  • react之组件通信详解

    目录 总结 父组件与子组件通信 父组件将自己的状态传递给子组件,子组件当做属性来接收,当父组件更改自己状态的时候,子组件接收到的属性就会发生改变 父组件利用ref对子组件做标记,通过调用子组件的方法以更改子组件的状态,也可以调用子组件的方法 父组中定义ref引用 import React,{Component,createRef} from 'react' import Child1 from './Child1' export default class App extends Compone

  • vue组件父子间通信详解（三）

    本文实例为大家分享了vue组件父子间通信的具体代码,供大家参考,具体内容如下 三.组件间通信($parent $refs) 父组件要想获取子组件的数据: ①在调用子组件的时候,指定ref属性 <child-component ref="mySon"></child-component> ②根据指定的引用的名字 找到子组件的实例对象 this.$refs.mySon 子组件要想获取父组件的数据: ①直接读取 this.$parent 通过this.$refs拿到子

  • vue3 父子组件传值详解

    现在距离vue3的诞生已经过了很长时间了,笔者也是近期才开始学习vue3.对比vue2来看,vue3在写法发生了不小的变化,最典型的例子就是vue3通过ref,或者reactive实现数据的响应式.因为ref和reactive的出现,使得vue3中父子组件的传值方式也发生了变化 咱们先看下vue2中的写法 父组件: <!-- 父组件 --> <template> <div> <children :title="title" @getChildr

  • angular 动态组件类型详解(四种组件类型)

    组件类型1:纯函数功能,而没有视图部分,即Factory(类似于$http) promise.component.html 常见的有内置的$http,$q之类的.一般使用promise与作用域进行交互 组件类型2:不是常驻于视图,而是动态插入的.有UI的一类组件,有输入交互.不常被调用(类似于Model对话框) factory.component.html 并发性.这里收到es6的启发.在factory内使用了构造函数,来区分不同的实例.当然,factory接口返回的类型要根据需求来定:仅仅是一

随机推荐