我打算做的是创建一个自定义事件,我将在创建的同一组件中聆听;
Events.component.ts
@Component({
moduleId: module.id.replace("/dist/", "/"),
selector: 'event-bind-c',
template:`
<button (click)="onClicked()">Component click</button>
<input (clicked)="showIt($event)" [placeholder]="emitted_val">
`
})
export class EventBindingComponent implements OnInit {
toggled_value:boolean = false;
emitted_val:string;
constructor() { }
ngOnInit() { }
@Output() clicked = new EventEmitter<string>();
onClicked = () => {
//alert("Inside of component");
this.clicked.emit("It works!");
}
showIt = (event_val:string) => {
alert("event_val:" + event_val);
this.emitted_val = event_val;
}
}
如果我在组件之外(在父母中)使用它,则可以使用
app.component.ts
@Component({
selector: 'my-app',
template: '<event-bind-c (clicked) = "onParentClicked($event)"></event-bind-c>',
})
export class AppComponent {
onParentClicked= (value:string) => {
alert("Outside of component "+value);
}
}
不支持。
只有父组件才能绑定到@Output()
为什么不致电this.showIt()
而不是发出事件?