为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 父子组件通信

父子组件通信

2021.10.13 15:17 704浏览

基本概念

Angular 提供了两个装饰器 Input 和 Output, 为父子组件通信提供了方法。
其中,Input 允许父组件向子组件发送数据,而 Output 允许子组件向父组件发送数据。

父组件向子组件发送数据

通过子组件中的 Input,实现子组件获取其父组件数据的功能。

父组件配置项:

// parent-component.component.html

<p style="background-color: cornflowerblue; padding: 20px 0;">
  parent-component works!

  <!-- 子组件:ChildComponentComponent -->
  <!-- childItem:子组件属性 -->
  <!-- parentItem:父组件属性 -->
  <!-- 通过属性绑定把子组件属性绑定到父组件属性上 -->
  <app-child-component [childItem]="parentItem"></app-child-component>
</p>


// parent-component.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-parent-component',
  templateUrl: './parent-component.component.html',
  styleUrls: ['./parent-component.component.scss']
})
export class ParentComponentComponent implements OnInit {

  // 给父组件属性赋值
  parentItem:string = '我是来自父组件的数据!';

  constructor() { }

  ngOnInit() {
  }

}

子组件配置项:

// child-component.component.html

<p style="background-color: burlywood;">
  child-component works!

  <!-- 展示父组件发送的数据 -->
  <span>{{ childItem }}</span>
</p>

// child-component.component.ts

// 导入装饰器 Input
import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-child-component',
  templateUrl: './child-component.component.html',
  styleUrls: ['./child-component.component.scss']
})
export class ChildComponentComponent implements OnInit {

  // 装饰子组件属性 childItem
  @Input()
  childItem!: string;

  constructor() { }

  ngOnInit() {
  }

}

图片描述

监听输入属性( @Input() 装饰的属性 )的变化,通常使用钩子函数 ngOnChanges(),具体用法可以参考:组件

子组件向父组件发送数据

通过子组件中的 Output,实现子组件向其父组件发送数据的功能。

子组件配置项:

// child-component.component.html

<p style="background-color: burlywood;">
  child-component works!

  <br>
  <input type="text" #item>

  <!-- 子组件绑定 click 事件,调用子组件方法 sendChildItemFn -->
  <button (click)="sendChildItemFn(item.value)">Send</button>
</p>


// child-component.component.ts

// 导入装饰器 Output 和自定义事件类 EventEmitter
import { Component, OnInit, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child-component',
  templateUrl: './child-component.component.html',
  styleUrls: ['./child-component.component.scss']
})
export class ChildComponentComponent implements OnInit {

  // 通过 @Output() 装饰,定义事件名称为 sendItemEvent
  // 初始化 EventEmitter 创建自定义事件,定义发送数据的类型为 string
  @Output() sendItemEvent = new EventEmitter<string>();

  constructor() { }

  ngOnInit() {
  }

  // 调用函数 sendChildItemFn 时,触发自定义事件 sendItemEvent
  sendChildItemFn(val: string){
    this.sendItemEvent.emit(val);
  }

}

父组件配置项:

// parent-component.component.html

<p style="background-color: cornflowerblue; padding: 20px 0;">
  parent-component works!
  <br>
  <span>{{ showChildItem }}</span>

  <!-- 在子组件的标签上,绑定子组件的自定义事件 sendItemEvent -->
  <!-- sendItemEvent 事件连接到父组件的函数 parentGetItemFn -->
  <!-- 事件对象 $event 中包含了子组件发送的数据 -->
  <app-child-component (sendItemEvent)="parentGetItemFn($event)"></app-child-component>
</p>


// parent-component.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-parent-component',
  templateUrl: './parent-component.component.html',
  styleUrls: ['./parent-component.component.scss']
})
export class ParentComponentComponent implements OnInit {

  showChildItem = '';

  constructor() { }

  ngOnInit() {
  }

  // 将子组件的数据赋值给父组件属性 showChildItem 上
  parentGetItemFn(event: string){
    this.showChildItem = event;
  }

}

图片描述


end

点击查看更多内容

本文首次发布于慕课网 ,转载请注明出处,谢谢合作

0人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
JS工程师
手记
粉丝
1.4万
获赞与收藏
688

关注TA,一起探索更多经验知识

作者相关文章
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消