父子组件通信

为爱心太软 2021/10/14 8:14:11

基本概念Angular 提供了两个装饰器 Input 和 Output, 为父子组件通信提供了方法。 其中,Input 允许父组件向子组件发送数据,而 Output 允许子组件向父组件发送数据。父组件向子组件发送数据通过子组件中的 Input,实现子组件获取其父组件数据的功能。父组件配置项: //…

基本概念

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

随时随地学软件编程-关注百度小程序和微信小程序
关于找一找教程网

本站文章仅代表作者观点,不代表本站立场,所有文章非营利性免费分享。
本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章,希望广大程序员努力学习,让我们用科技改变世界。
[父子组件通信]http://www.zyiz.net/tech/detail-241247.html

上一篇:进程与线程【通俗易懂】

下一篇:java毕业设计 springboot新闻信息管理系统 springboot毕业设计题目课题选题 springboot毕业设计项目作品源码(5)毕业设计论文参考

赞(0)
关注微信小程序
程序员编程王-随时随地学编程

扫描二维码或查找【程序员编程王】

可以随时随地学编程啦!

技术文章导航 更多>
扫一扫关注最新编程教程