[英]Angular2 fire click event on unknown html element
I want to handle a click event of x3dom's shape
html element in my parent component. 我想在父组件中处理x3dom的shape
html元素的click事件。 The onclick
event is fired by x3dom . x3dom触发了onclick
事件 。 I can only delegate it with an ugly hack (see below). 我只能通过丑陋的方式委派它(请参阅下文)。 Because shape
is not a known Html tag by Angular 2 I have to define a shape
component? 因为Angular 2并不知道shape
是Html标签,所以我必须定义一个shape
组件? or Not? 或不?
In Parent Component: 在父组件中:
<shape (click)="doStuffInParent()" ></shape> <!-- click is not fired by x3dom -->
Shape component so far: 到目前为止的形状组件:
import {Component} from '@angular/core';
import { Input, Output, EventEmitter} from '@angular/core';
@Component({
selector: 'Shape',
providers: [],
directives: [],
pipes: []
})
export class Shape {
@Output() notify: EventEmitter<string> = new EventEmitter<string>(); // wrong!
constructor() {}
}
Edit: Maybe I don't need the component? 编辑:也许我不需要该组件? The onclick event is fired by X3dom and not by me. X3dom而不是我触发了onclick事件。
another solution for me would be if I can just call my component method from a regular onclick
event what I asked here . 我的另一个解决办法是,如果我可以叫我的组件的方法,从一个普通onclick
事件我问这里 。
Update I hacked a solution what solved at least my problem: 更新我破解了一个解决方案,至少解决了我的问题:
call Angular 2 component method from html event 从html事件中调用Angular 2组件方法
Working Demo : https://plnkr.co/edit/qQudgi9touIFOe52m4JY?p=preview 工作演示: https : //plnkr.co/edit/qQudgi9touIFOe52m4JY?p=preview
<Shape (myClick)="doStuffInParent($event)"></Shape>
in Component code, 在组件代码中,
doStuffInParent(value){
console.log(value); //Angular2
}
import {Component} from '@angular/core';
import { Input, Output, EventEmitter} from '@angular/core';
@Component({
selector: 'Shape',
providers: [],
directives: [],
pipes: [],
template:`<div (click)="click()">Shap Component</div>`
})
export class Shape {
@Output() myClick: EventEmitter<string> = new EventEmitter<string>();
click(){
this.myClick.next('Angular2');
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.