Aurelia的Angular 2 EventEmitter

Question

我正在努力将一些角度2代码移植到Aurelia，并且最重要的是它是一项简单的任务。

然而，我想知道一些事情。 在角度2自定义元素中，我看到了对：

的引用

    @Output() onChange: EventEmitter<any> = new EventEmitter();

并在事件处理程序中：

    this.onChange.next(input.checked);

我的问题是：aurelia中的等效表示是什么？

br hw

Answer 1

有几种方法可以做到这一点，这里有几个例子：

使用@bindable

我-component.js

import {bindable} from 'aurelia-framework';

export class MyComponent {
  @bindable change;

  notifyChange() {
    this.change({ someArg: 'something', anotherArg: 'hello' });
  }
}

<强> app.html

<template>
  ...
  <my-component change.call="handleChange(someArg, anotherArg)"></my-component>
  ...
</template>

<强> app.js

export class App {
  handleChange(a, b) {
    ...
  }
}

使用DOM事件

我-component.js

import {inject} from 'aurelia-framework';
import {DOM} from 'aurelia-pal';

@inject(Element)
export class MyComponent {
  constructor(element) {
    this.element = element;
  }

  notifyChange() {
    let detail = { someArg: 'something', anotherArg: 'hello' };        
    let eventInit = { detail, bubbles: true };
    let event = DOM.createCustomEvent('change', eventInit);
    this.element.dispatchEvent(event);
  }
}

注意：DOM.createCustomEvent不是必需的。如果您不想为了测试目的而抽象出DOM，请使用new CustomEvent(...)。

<强> app.html

<template>
  ...
  <my-component change.delegate="handleChange($event)"></my-component>
  ...
</template>

<强> app.js

export class App {
  handleChange(event) {
    ...
  }
}

Answer 2

对于那些感兴趣的人： 根据@Jeremy的回答，我已经建立了一个将primefaces组件迁移到aurelia的框架：

rating.js

<p-rating onrate.call="handleChange(originalEvent, value)" oncancel.call="handleCancel(event)">

app.html：

componentDidMount

再次感谢您伸出援助之手。

/ HW