Question

使用服务共享全局数据看起来不错。但我相信这种做法并不是与其他组件共享数据的最佳方式。将全局变量存储在服务中是可以的，例如记录的用户，设置或许多组件需要检索数据的任何东西。

当组件需要将数据发送到另一个组件时，我更喜欢某种直接通信。关于此的文档非常少，在许多情况下，适用于Angular 2 Beta的过时版本。

我正在尝试创造一些非常原始的东西放在公共回购中，供有相同需求的人使用，但面对发射器的困难。

当我使用EventEmitter时，我找不到让一个组件“监听”另一个组件的事件的方法。

下面的通用示例主要是关于子组件向父组件发送数据。最终结果必须是反馈变量，当用户键入“fire”时显示“繁荣”。

app.component.ts

import {Component} from 'angular2/core';
import {ParentComponent} from './parent.component'
@Component({
selector: 'my-app',
directives : [ParentComponent],
template: `<h1>My App</h1>
<parent-component></parent-component>
`
})
export class AppComponent { 

}

parent.component.ts

import {Component} from 'angular2/core';
import {ChildComponent} from './child.component'
@Component({
selector: 'parent-component',
directives : [ChildComponent]
template: `<p>I'm the parent component</p>
<input type="textbox" [(ngModel)]="theModel">
<p>feedback: {{feedback}}</p><!--THIS IS WHERE THE BOOM MUST APPEAR-->
<child-component txt="{{theModel}}"></child-component>
`
})
export class ParentComponent { 
   theModel;
}

child.component.ts

import {Component, Input, OnChanges, EventEmitter,Output, Injectable}    from 'angular2/core';
@Injectable()
@Component({
selector: 'child-component',
template: `<p>I'm the child component</p>
`
})
export class ChildComponent implements OnChanges { 
@Input() txt: string;
@Output() aim: EventEmitter<any> = new EventEmitter();
ngOnChanges(changes: {[propName: string]: SimpleChange}) {
    var t = changes['txt'].currentValue;
    if(t == 'fire') {
        console.log('Fire !!!');
        this.kill.aim("booom !!!");
    }
}
}

我需要找到一种方法来捕获子组件发出的事件。我看到了几个类似需求的例子，但看起来像angular 2你有很多方法可以做同样的事情，所以通常这些例子只适用于一个场景 - 这就是为什么我创造了一些通用的东西，没有特别需要的链接。顺便说一句，我不确定一个孩子是否真的是最好的方式。随意与更好的方法合作。

Answer 1

使用(aim)="feedback=$event"

将操作注册到子组件的事件

import {Component} from 'angular2/core';
import {ChildComponent} from './child.component'

@Component({
  selector: 'parent-component',
  directives : [ChildComponent]
  template: `
<p>I'm the parent component</p>
<input type="textbox" [(ngModel)]="theModel">
<p>feedback: {{feedback}}</p><!--THIS IS WHERE THE BOOM MUST APPEAR-->
<child-component txt="{{theModel}}" (aim)="feedback=$event"></child-component>`
})
export class ParentComponent { 
   feedback;
   theModel;
}

您为父母发出的事件可以使用this.aim.emit(someValue)

进行收听

import {Component, Input, OnChanges, EventEmitter,Output, Injectable}    from 'angular2/core';

@Injectable()
@Component({
  selector: 'child-component',
  template: `<p>I'm the child component</p>`
})
export class ChildComponent implements OnChanges { 
  @Input() txt: string;
  @Output() aim: EventEmitter<any> = new EventEmitter();
  ngOnChanges(changes: {[propName: string]: SimpleChange}) {
    var t = changes['txt'].currentValue;
    if(t == 'fire') {
        console.log('Fire !!!');
        // this.kill.aim("booom !!!");
        this.aim.emit("boom");
    }
  }
}

更多详情https://angular.io/docs/ts/latest/guide/template-syntax.html#!#event-binding

Answer 2

Simple example - EventEmitter

<强> parent.ts

<input type="textbox" [(ngModel)]="theModel">
<child-component txt="{{theModel}}" (aim)=onEdit($event)></child-component>

onEdit(arg){  // this function is optional you my also try what Gunter has suggested.
   console.log(arg);
   this.feedback=arg;
}

<强> child.ts

@Input() txt: string;
@Output() aim: EventEmitter<any> = new EventEmitter();

ngOnChanges(changes: {[propName: string]: SimpleChange}) {
var t = changes['txt'].currentValue;
 if(t == 'fire') {
    console.log('Fire !!!');
       this.aim.emit("boom");
 }
}
...

注意：您可以传递上述链接中展示的对象。

Angular 2 - 在组件之间交换数据（无服务）

2 个答案: