angular子组件传值给父组件

angular子组件传值给父组件

step1: D:\vue\untitled2901\src\app\app.component.ts

import {Component} from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    Message:{{message}}
    <app-child (messageEvent)="receiveMessage($event)"></app-child>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent{

  constructor() {
  }

  message: string;

  receiveMessage($event){
    this.message =  JSON.parse($event).name;
  }

}

step2: D:\vue\untitled2901\src\app\child\child.component.ts

import {Component, Output, EventEmitter} from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    <button (click)="sendMessage()">send Message</button>
  `,
  styleUrls: ['./child.component.css']
})
export class ChildComponent {

  message = JSON.stringify({name: 'alice', address: 'beijing',age:17});

  @Output() messageEvent = new EventEmitter<string>();

  constructor() {
  }

  sendMessage() {
    this.messageEvent.emit(this.message)
  }

}

run ,success!!!

end