我正在移植一些角2碼Aurelia大街和最這是一件容易的事。角2 EventEmitter在奧裏利亞

然而，有件事我想知道。在角2個自定義元素我已經看到了引用：

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

，並在事件處理程序：

this.onChange.next(input.checked);

我的問題是：什麼是在Aurelia大街同等的代表性？

BR HW

來源

2016-01-26 Helge Waastad

幾種方法可以做到這一點，這裏有幾個例子：

使用`@bindable`

我-component.js

import {bindable} from 'aurelia-framework'; 

export class MyComponent { 
    @bindable change; 

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

app.h TML

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

來源

2016-01-26 13:26:33

我做了一個快速測試，你說得對。兩者都很好。我已經開始移植primefaces的快照版本，並且使用我有限的js知識，我必須研究如何將其構建到jquery模塊中。取得如下評級組件：https://github.com/primefaces/primeng/blob/master/components/rating/rating.ts –

在typescript中使用@bindable示例我得到錯誤'this.change不是一個函數'。我在這裏錯過了很明顯的東西嗎 –

對於那些有興趣：基於@Jeremy答案我已經得到了一個框架，primefaces組件遷移到aurelia：

rating.j小號

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)">

謝謝你給了援助之手。

/hw

來源

2016-01-27 15:17:08

角2 EventEmitter在奧裏利亞

回答

使用@bindable

使用DOM事件

相關問題

使用`@bindable`