Angular学习笔记(三) --- 父子组件通信 @Input 与 @OutInput 详解 ( 下 )

子组件向父组件发送事件

  1. 首先我们创建一个simple-app项目,在项目中,再创建一个子组件ChildComponent

  2. 修改子组件的文件

    • child.component.html
<div class="childBox">
  <p>子组件</p>
  <div>
    <label>姓名:</label> 
    <input type="text" [(ngModel)]="name">
    <input type="button" value="向父组件发送事件" (click)="upload()">
  </div>
</div>
- child.component.ts
import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent {

  constructor() { }

  @Output() event = new EventEmitter();

  private name: string;

  upload() {
    this.event.emit(this.name);
  }
}

这里我们给父组件发送一个name

  1. 下面我修改父组件

    • app.compontent.html
<div class="parentBox">
  <p>父组件</p>
  <div>接受子组件数据: {{parent_name}}</div> 
</div>

<div class="childBox">
  <app-child [parent]="parent_data" (event)="getData($event)"></app-child>
</div>

这样我们的父组件和子组件的内容都确定了,下面我们打开界面,看看浏览器给我们展示的内容

这里写图片描述

当我们点击按钮,就会显示出子组件传递name。
这里写图片描述

总结

Angular学习笔记(三) — 父子组件通信 @Input 与 @OutInput 详解 ( 上 )
Angular学习笔记(二) — 生命周期钩子
Angular学习笔记(一) — 之安装教程

系列学习文章还会持续更新,欢迎小伙伴加入。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值