子组件向父组件发送事件

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

2. 修改子组件的文件

   • child.component.html

    
  
     
子组件
  
     
    
      姓名：     
          
        
     
    
复制代码

- 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。

3. 下面我修改父组件

   • app.compontent.html

    
  
     
父组件
  
     
      接受子组件数据： {
   {parent_name}}
     
 
    
    
  
     
    
复制代码

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

当我们点击按钮，就会显示出子组件传递name。

总结

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