耀极客论坛

 找回密码
 立即注册
查看: 518|回复: 0

angular父子组件通信详解

[复制链接]

336

主题

318

帖子

22万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
220555
发表于 2022-5-8 02:11:03 | 显示全部楼层 |阅读模式
  这篇文章主要为大家介绍了angular父子组件通信,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助


用到的api
  Input - 子组件中定义可接受的属性,可以用来父组件给子组件传递数据
  Output - 子组件中定义输出的属性,该属性需要是 EventEmitter 的事件类型,用来通知父组件做出相应的操作
  EventEmitter - 用在带有 @Output 指令的组件中,以同步或异步方式发出自定义事件,并通过订阅实例来为这些事件注册处理器。

简单的例子
  列表渲染子组件,点击子组件通知父组件进行操作

person.ts
  1. export interface Person {
  2.   name: string;
  3.   age: number;
  4.   sex: string;
  5. }
复制代码
父组件
  1. import { Component, OnInit } from '@angular/core';
  2. import { Person } from './person';
  3. @Component({
  4.   selector: 'app-comp-parent',
  5.   template: `
  6.     ‹app-comp-child
  7.       *ngFor="let person of personList"
  8.       (itemClick)="onItemClick($event)"
  9.       [data]="person"
  10.     >‹/app-comp-child>
  11.   `,
  12. })
  13. export class CompParentComponent implements OnInit {
  14.   personList: Person[] = [
  15.     { name: '张三', age: 21, sex: '男' },
  16.     { name: '李四', age: 25, sex: '男' },
  17.     { name: '李莉', age: 20, sex: '女' },
  18.   ];
  19.   constructor(){ }
  20.   ngOnInit(): void { }
  21.   onItemClick(item: Person){
  22.     console.log('click-person: ', item);
  23.   }
  24. }
复制代码
子组件
  1. import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
  2. import { Person } from './person';
  3. @Component({
  4.   selector: 'app-comp-child',
  5.   template: `
  6.     ‹div (click)="itemClick.emit(data)">
  7.       Name: {{ data.name }}
  8.       Age: {{ data.age }}
  9.       Sex: {{ data.sex }}
  10.     ‹/div>
  11.   `,
  12. })
  13. export class CompChildComponent implements OnInit {
  14.   @Input() data!: Person;
  15.   @Output() itemClick = new EventEmitter();
  16.   constructor(){ }
  17.   ngOnInit(): void { }
  18. }
复制代码
效果


总结

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


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-12-7 12:31 , Processed in 0.071805 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表