Angular 2在组件内部监听自定义事件

时间:2016-12-13 15:24:28

标签: angular event-handling

我打算做的是创建一个自定义事件,我将在创建的同一组件内听到它;

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

1 个答案:

答案 0 :(得分:0)

不支持。

只有父组件可以绑定到@Output()

发出的事件

为什么不拨打this.showIt()而不是发出事件?