Angular Aurelia 中的 2 个 EventEmitter

Question

我正在努力将一些 angular 2 代码移植到 Aurelia，大多数情况下这是一项简单的任务。

但是，有件事我想知道。在 angular 2 个自定义元素中，我看到了对以下内容的引用：

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

并在事件处理程序中：

    this.onChange.next(input.checked);

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

br 硬件

Answer 1

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

使用`@bindable`

my-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 个事件

my-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

import {inject,bindable,noView,customElement} from 'aurelia-framework';
import 'jquery-ui';
import 'primeui'
import 'primeui/primeui-min.css!';

@customElement('p-rating')
@inject(Element)
@noView
export class Rating {
  @bindable value;
  @bindable disabled;
  @bindable readonly;
  @bindable stars;
  @bindable cancel = true;
  @bindable onrate;
  @bindable oncancel;

  constructor(element){
    this.element=element;
  }

  attached(){
    if(!this.stars){
      this.stars=5;
    }
   $(this.element).puirating({
     value: this.value,
     stars: this.stars,
     cancel: this.cancel,
     disabled: this.disabled,
     readonly: this.readonly,
     rate: (event: Event, value: number) => {
       if(this.onrate){
         this.onrate({originalEvent: event, value: value});
       } else {
         console.log('No onrate callback');
       }
     },
     oncancel: (event: Event) => {
       if(this.oncancel){
         this.oncancel({event});
       } else {
         console.log('No cancel callback');
       }
     }
   });
 }

 detached(){
   $(this.element).puirating('destroy');
 }
}

app.html:

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

再次感谢您的帮助。

/硬件

Angular Aurelia 中的 2 个 EventEmitter

Angular 2 EventEmitter in Aurelia

javascript

aurelia

angular

使用`@bindable`

使用 DOM 个事件

Angular Aurelia 中的 2 个 EventEmitter

Angular 2 EventEmitter in Aurelia

javascript

aurelia

angular

使用@bindable

使用 DOM 个事件

使用`@bindable`