typescript 使用@output订阅组件事件

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了typescript 使用@output订阅组件事件相关的知识,希望对你有一定的参考价值。

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){}
}

以上是关于typescript 使用@output订阅组件事件的主要内容,如果未能解决你的问题,请参考以下文章

使用 Typescript 在服务中链接 observable 并最终在组件中订阅

ReactiveX JS 和 TypeScript - 如何取消订阅?

使用 Typescript 在 Angular 2 中的组件之间共享行为

基于rollup + typescript开发vue组件,可使用ts装饰器

如何在 TypeScript v2.x 中从自定义 React 组件公开“通用”事件

角 2 |订阅 Observables