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学习笔记（一） — 之安装教程

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