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