typescript 使用@output订阅组件事件

Posted 2021-05-21

import {Component} from '@angular2/core';
import {ChildComponent} from './child.component';

@Component({
  selector:'parent-app',
  template:`
  <div style="border:2px solid orange; padding:5px;">
    <h1>Parent Component: {{parent}}</h1>
    <child-app (changed)=changed($event)></child-app>
  </div>
  `,
  directives:[ChildComponent]
})
export class AppComponent{
  changed(changedCharacter:any){
    if(changedCharacter){
      this.parent = changedCharacter.name;
    }
  } 
} 

<parent-app>
    loading...
</parent-app>

import {Component, EventEmitter, Output} from '@angular2/core';
import{ Character } from './character';
@Component({
  selector:'child-app',
  template:`
    <div style = "border:2px solid orange; padding:5px;">
      <h1>Child Component</h1>
      <input [(ngModel)]="characters[0].name">
      <button (click)="select(characters[0])">Output</button>
    </div>
  `
})
export class ChildComponent implements OnInit{
  @Output() changed = new EventEmitter<Character>();
  characters = [
    {
      "id":11,
      "name":"Nisar"
    }
    ];
    
    selectedCharacter : Character;
    
    select(selectedCharacter: Character){
      this.changed.emit(selectedCharacter);
    }
}

export class Character{
  constructor(public id:number,public name:string){}
}