在Angular2中通过EventEmitter传递数据

我试图在两个组件之间传递带有EventEmitter的变量，我在两个不同的.component文件中有这两段代码（我已经删除了样板代码）：

如果将

+$event.name

替换为“test”之类的值，则不会得到错误。

此行无效

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

EventEmitter

仅支持一个构造函数参数

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

  constructor(isAsync: boolean = true)

导出类EventEmitter扩展主题{
...
构造函数（isAsync:boolean=true）

另请参见此行无效

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

EventEmitter

仅支持一个构造函数参数

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

  constructor(isAsync: boolean = true)

导出类EventEmitter扩展主题{
...
构造函数（isAsync:boolean=true）

---

另请参见您所做的似乎几乎是错误的。要引导您正确的方向，您可以检查此答案。

EventEmitter通常用于将数据从

子组件传播到父组件。
在您的情况下，
shoppinglist项目
会像这样将数据传播到
shoppinglist
组件



注意：请忽略不正确的命名约定，Gunter的建议是正确的

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, []);

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

@组件({
选择器：“我的应用程序”，
指令：[shoppinglistitem]，
模板：`
购物清单
{{item | json}}
`
})
导出类BodyContent{
名称：string='Angular1'；
onEditItem（arg）{
log（'oneditem start'）；
控制台日志（arg）；
此项=arg；
}
}
引导（BodyContent，[]）；

shoppinglistitem.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, []);

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

@组件({
选择器：'购物列表项目'，
模板：`

购物清单项目


编辑

`
})
导出类shoppinglistitem{
项目={name:'micronyks'，金额：'0'}；
@编辑输出（）：EventEmitter=新的EventEmitter（）；
构造函数（）{
log（'Constructor called'）；
}
onEdit（）
{
this.editted.emit（this.item）；
}
}
您所做的似乎几乎是错误的。为了引导您正确的方向，您可以检查此答案。

EventEmitter通常用于将数据从
子组件传播到父组件。
在您的情况下，
shoppinglist项目
会像这样将数据传播到
shoppinglist
组件



注意：请忽略不正确的命名约定，Gunter的建议是正确的

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, []);

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

@组件({
选择器：“我的应用程序”，
指令：[shoppinglistitem]，
模板：`
购物清单
{{item | json}}
`
})
导出类BodyContent{
名称：string='Angular1'；
onEditItem（arg）{
log（'oneditem start'）；
控制台日志（arg）；
此项=arg；
}
}
引导（BodyContent，[]）；

shoppinglistitem.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, []);

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

@组件({
选择器：'购物列表项目'，
模板：`

购物清单项目


编辑

`
})
导出类shoppinglistitem{
项目={name:'micronyks'，金额：'0'}；
@编辑输出（）：EventEmitter=新的EventEmitter（）；
构造函数（）{
log（'Constructor called'）；
}
onEdit（）
{
this.editted.emit（this.item）；
}
}
答案不包含完整的解决方案。但肯定会帮助您继续。我几乎没有您想要的。还押事宜可以由您完成。答案不包含完整的解决方案。但肯定会帮助您继续。我几乎没有您想要的。还押事宜可以由您完成。