данные Проходят через EventEmitter в Angular2

Question

Я пытаюсь передать переменную с EventEmitter между 2-х компонентов, у меня есть эти 2 куска кода в 2-х разных .component файлов (я удалил шаблонный код):

@Component({ 
    selector: 'shopping-list-item', 
    template: ` 
     <form #f="ngForm"> 
      <div class="input"> 
       <label for="item-name">Name</label> 
       <input type="text" id="item-name" ngControl="inputname"> 
      </div> 
      <div class="input"> 
       <label for="item-amt">Amount</label> 
       <input type="text" id="item-amt" ngControl="inputamount"> 
      </div> 
      <button class="info" (click)="onEdit()">Edit</button> 
     </form> 
     `, 
     inputs:['item'], 
     outputs:['editted'] 
}) 

export class ShoppingListItemComponent { 
    item = { name: '', amount: 0 }; 
    editted = new EventEmitter({name: form['inputname'], amount: form['inputamount'] }); 

    onEdit(){ 
     this.editted.emit(this.item); 
    } 
} 





@Component({ 
    selector: 'shopping-list', 
    template: ` 
     <section> 
      <div class="list"> 
       <ul> 
        <li *ngFor="#listItem of listItems" (click)="onSelect(listItem)">{{listItem.name}} ({{listItem.amount}})</li> 
       </ul> 
      </div> 
     </section> 
     <section> 
      <shopping-list-item [item] (editted)="onEditItem($event)"></shopping-list-item> 
     </section> 
    ` 
}) 
export class ShoppingListComponent { 
    onEditItem(item:ListItem){ 
     let myindex = this.listItems.indexOf(item); 
     this.listItems[myindex].name = +$event.name; 
     this.listItems[myindex].amount = +$event.amount; 
    } 
} 

я получаю эту ошибку:

Error during evaluation of "editted". `$event is not defined` 

Если я заменяю +$event.name со значением, как «тест», что я не получаю ошибки.

Answer 1

Эта строка недействительна

new EventEmitter({name: form['inputname'], amount: form['inputamount'] }); 

EventEmitter только поддерживает одно рассуждение застройщик

export class EventEmitter<T> extends Subject<T> { 
    ... 

    constructor(isAsync: boolean = true) 

Смотрите также https://github.com/angular/angular/blob/14f0e9ada8b23e6cb4dd4cf4ce1127e9c9180476/modules/angular2/src/facade/async.ts#L108

Answer 2

То, что вы сделали, кажется, почти так. Чтобы вести вас в правильном направлении, вы можете проверить этот ответ.

EventEmitter обычно используется для распространения данных от child to parent. В вашем случае, shoppinlistitem будут распространяться данные на shoppinglist компонент, как это,

see this working demo
Примечание: пожалуйста игнорировать неправомерные соглашения об именах и что Гюнтер предложил правильно.

shoppinglist.ts

@Component({ 
selector: 'my-app', 
directives:[shoppinglistitem], 
template: ` 

<h2>shopping-list</h2>  
{{item|json}} 
<shopping-list-item (editted)="onEditItem($event)"></shopping-list-item> 
` 
}) 

export class BodyContent { 

    name:string='Angular1'; 
    onEditItem(arg){ 
      console.log('onEditedItem started'); 
      console.log(arg); 
      this.item=arg; 
     } 
} 

bootstrap(BodyContent, []); 

shoppinglistitem.ts

@Component({ 
selector: 'shopping-list-item', 
template: ` 
<hr> 
     <h4>ShoppinglistItem</h4> 
     <br> 
     <button class="info" (click)="onEdit()">Edit</button> 
<hr> 
    ` 
}) 

export class shoppinglistitem { 
    item = { name: 'micronyks', amount: '0' }; 

    @Output() editted: EventEmitter = new EventEmitter(); 

     constructor() { 
     console.log('Constructor called'); 
     } 

     onEdit() 
     { 
     this.editted.emit(this.item); 
     } 
}