Angular 2-在組件之間交換數據（無服務）

Question

使用服務共享全局數據看起來不錯。 但是我相信，這種做法不是與其他組件共享數據的最佳方法。 可以將全局變量存儲在服務中，例如已記錄的用戶，設置或許多需要檢索數據的組件的任何事物。

當組件需要將數據發送到另一個組件時，我更喜歡某種直接通信。 有關此文檔的文檔很少，並且在許多情況下適用於Angular 2 Beta的過時版本。

我正在嘗試創建一些非常原始的東西來放置在公共倉庫中，以供有同樣需求但面臨發射者困難的人們使用。

當我使用EventEmitter時，我找不到一種使一個組件“監聽”另一個組件的事件的方法。

下面的通用示例基本上是關於子組件將數據發送到父組件的。 最終結果必須是當用戶鍵入“ fire”時顯示“ boom”的反饋變量。

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"將操作注冊到子組件的(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

簡單示例-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");
 }
}
...

注意 ： 您也可以傳遞上面鏈接中演示的對象 。