Angular2: Передача значений из компонента

Question

Я действительно смущен тем, как передать значение обратно в родительский компонент.

Вот некоторые из родителей HTML, который создает два дочерних counter компоненты

<div> 
    <h2>Counters</h2> 
    <counter [count]="model.top" (mchange)="mchangetop(delta)"></counter> 
    <counter [count]="model.bottom" (mchange)="mchangetop(delta)"></counter> 
</div> 

mchangetop немного сложнее в конкретизации, но это потому, что я намерен сделать много функций изменения в установленном порядке.

mchangetop(delta) { 
    this.mchange('top')(delta); 
} 

mchange(countName){ 
    return (delta => this.model[countName] += delta); 
} 

Тогда сама counter компонент имеет следующие (вы можете увидеть все перестановки я пробовал).

import { Component, View } from 'angular2/angular2'; 

@Component({ 
    selector: 'counter' 
    , properties: ['count:count', 'mchange:mchange'] 
}) 
@View({ 
    templateUrl: 'app/components/counter/counter.html', 
}) 
export class CounterComponent { 
    // @Input() count : Number; 
    // @Output() mchange : Function; 

    // count: Number; 
    // mchange: Function; 

    constructor() { 
    // this.count = count; // count gets set up correctly 
    } 

    change(delta) { 
    this.mchange(delta); 
    } 

}; 

При существующем положении вещей, count это передается вниз правильно, но я получаю ошибки о mchange не определено, что предполагает change подключен вверх OK.

EXCEPTION: Error during evaluation of 
"click"BrowserDomAdapter.logError @ 
angular2.dev.js:21835BrowserDomAdapter.logGroup @ 
angular2.dev.js:21846ExceptionHandler.call @ 
angular2.dev.js:4431(anonymous function) @ 
angular2.dev.js:19543NgZone._onError @  
angular2.dev.js:10711errorHandling.onError @ angular2.dev.js:10630run @ 
angular2.dev.js:141(anonymous function) @ 
angular2.dev.js:10644NgZone.run @ angular2.dev.js:10607outsideHandler 
@ angular2.dev.js:17809run @ angular2.dev.js:138zoneBoundFn @  
angular2.dev.js:111 
angular2.dev.js:21835 ORIGINAL EXCEPTION: ReferenceError: mchange is not defined 

Answer 1

Вы должны инициализировать mchange с EventEmitter и использовать его метод next. См. this plunker.

import {Component, View, Input, Output, EventEmitter} from 'angular2/angular2' 

@Component({ 
    selector: 'counter' 
}) 
@View({ 
    template: ` 
    <h1 (click)="change(10)">Count {{ count }}</h1> 
    `, 
}) 
export class Counter { 
    @Input() count : Number; 
    @Output() mchange = new EventEmitter(); 

    change(delta) { 
    this.mchange.next(delta); 
    } 
};