Question

我想在父组件中处理x3dom的shape html元素的点击事件。 x3dom 触发onclick事件。我只能用一个丑陋的黑客委托它（见下文）。因为shape不是Angular 2的已知Html标记，我必须定义shape组件？或不是？

在父组件中：

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

到目前为止

Shape组件：

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

}

编辑：也许我不需要这个组件？ onclick事件由X3dom而不是我发起。

对我来说，另一个解决方案是，如果我可以从常规onclick事件中调用我的组件方法，我会问here。

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

call Angular 2 component method from html event

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

  }

未知html元素

1 个答案: