未知html元素上的Angular2火点击事件

Question

我想在父组件中处理x3dom的shape html元素的click事件。 x3dom触发了onclick事件 。 我只能通过丑陋的方式委派它（请参阅下文）。 因为Angular 2并不知道shape是Html标签，所以我必须定义一个shape组件？ 或不？

在父组件中：

<shape (click)="doStuffInParent()" ></shape> <!-- click is not fired by x3dom -->

到目前为止的形状组件：

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

}

编辑：也许我不需要该组件？ X3dom而不是我触发了onclick事件。

我的另一个解决办法是，如果我可以叫我的组件的方法，从一个普通onclick事件我问这里 。

更新我破解了一个解决方案，至少解决了我的问题：

从html事件中调用Angular 2组件方法

Answer 1

工作演示： https : //plnkr.co/edit/qQudgi9touIFOe52m4JY?p=preview

<Shape (myClick)="doStuffInParent($event)"></Shape>

在组件代码中，

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

  }