Angular2：從組件中傳遞值

Question

我真的很困惑如何將值傳遞回父組件。

這是一些創建兩個子counter組件的父HTML

<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已經連線好了。

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方法。 看到這個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);
  }
};