Angular2：从一个组件传递值 [英] Angular2: Passing values up from a component

问题描述

我真搞不清楚如何通过一个值备份到父组件。

下面是创建两个子计数组件一些家长HTML

＆LT; D​​IV＆GT;
    ＆LT; H2＆GT;柜台及LT; / H＆GT;
    ＆lt;反向第[count] =model.top（mchange）=mchangetop（增量）＆GT;＆LT; /计数器＆GT;
    ＆lt;反向第[count] =model.bottom（mchange）=mchangetop（增量）＆GT;＆LT; /计数器＆GT;
＆LT; / DIV＆GT;


mchangetop 是在其实例有点复杂，但是那是因为我打算做大量的功能变化在适当的时候。

mchangetop（增量）{
    this.mchange（'顶'）（增量）;
}mchange（countName）{
    返回（△=＆GT; this.model [countName] + =增量）;
}


然后计数组件本身具有以下（你可以看到所有我试着排列）。

进口{组件，查看}从'angular2 / angular2';@零件（{
    选择：反'
  ，属性：['计数：计数'，'mchange：mchange']
}）
@视图（{
  templateUrl：应用程序/组件/计数器/ counter.html'，
}）
出口类CounterComponent {
  // @input（）数：数字;
  // @Output（）mchange：功能;  //数：数字;
  // mchange：功能;  构造函数（）{
    // this.count =计数; // Count获取正确设置
  }  变化（增量）{
    this.mchange（增量）;
  }};


就目前情况来看，计数正在向下传递正确的，但我得到没有定义有关mchange错误，这说明更改的接线确定。

例外：评估过程中的错误
点击BrowserDomAdapter.logError @
angular2.dev.js：21835BrowserDomAdapter.logGroup @
angular2.dev.js：21846ExceptionHandler.call @
angular2.dev.js：4431（匿名函数）@
angular2.dev.js：19543NgZone._onError @
angular2.dev.js：10711errorHandling.onError @ angular2.dev.js：10630run @
angular2.dev.js：141（匿名函数）@
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原始​​异常：的ReferenceError：mchange没有定义


解决方案

您应该初始化 mchange 与 EventEmitter ，并使用其<一个href=\"https://github.com/angular/angular/blob/2.0.0-alpha.44/modules/angular2/src/core/facade/async.ts#L100\"相对=nofollow> 接下来 方法。请参见这个plunker 。

进口{组件，查看，输入，输出，EventEmitter}从'angular2 / angular2@零件（{
  选择：反'
}）
@视图（{
  模板：`
    ＆LT; H1（点击）=变化（10）＆GT;计数{{count}}个＆LT; / H1＆GT;
  `
}）
出口类计数器{
  @input（）数：数字;
  @Output（）mchange =新EventEmitter（）;  变化（增量）{
    this.mchange.next（增量）;
  }
};


I'm really confused about how to pass a value back up to a parent component.

Here is some parent HTML that creates two child counter components

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

mchangetop is a little complicated in its instantiation but that's because I intend to make lots of change functions in due course.

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

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

Then the counter component itself has the following (you can see all the permutations I've tried).

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);
  }

};

As things stand, count is being passed down correctly, but I get errors about mchange not defined, which suggests change is wired up 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

解决方案

You should initialize mchange with EventEmitter and use its next method. See 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);
  }
};

这篇关于Angular2：从一个组件传递值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！