子组件向父组件发送事件
首先我们创建一个simple-app项目,在项目中,再创建一个子组件
ChildComponent
。修改子组件的文件
- 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
。
下面我修改父组件
- 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学习笔记(一) — 之安装教程
系列学习文章还会持续更新,欢迎小伙伴加入。