未知html元素上的Angular2火点击事件 [英] Angular2 fire click event on unknown html element

问题描述

我想处理父组件中x3dom的 shape html元素的click事件. onclick 事件由x3dom触发.我只能通过丑陋的方式委派它(请参阅下文).因为 shape 不是Angular 2已知的Html标签，所以我必须定义一个 shape 组件?还是不?

I want to handle a click event of x3dom's shape html element in my parent component. The onclick event is fired by x3dom. 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 ashape component? or Not?

在父组件中:

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

}

也许我不需要该组件?X3dom触发了onclick事件，而不是我触发了.

Maybe I don't need the component? The onclick event is fired by X3dom and not by me.

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

another solution for me would be if I can just call my component method from a regular onclick event what I asked here.

更新我破解了至少可以解决我的问题的解决方案:

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

推荐答案

工作演示: 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元素上的Angular2火点击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！