Angular 2 - 组件之间的双向通信

Question

我有这段代码...这是我正在尝试构建的示例教程应用程序，它反射(reflect)了开发人员的日常基本需求。实际上，当用户在父组件上键入“fire”时，子组件会执行一个事件，该事件会向父组件发送单词“booom”——这是一个示例，用于演示子组件使用@Input 向父组件发送消息和OnChanges.

现在，我正在尝试做一些不同的事情:当用户按下回车键 (keyCode == 13) 时， parent 应该如何告诉 child 一条消息，如“目标锁定”。有了这个，我们将有一个组件之间双向通信的场景。

什么是最好的方法？

子组件

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.aim.emit("booom !!!");
    }
}
}

父组件

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" (keydown)="arrow($event)">
<p>feedback: {{feedback}}</p>
<child-component txt="{{theModel}}" (aim)="feedback=$event"></child-component>
`
})
export class ParentComponent { 
theModel;
feedback;
arrow (evt){
    if(evt.keyCode ==13) {
        //Need to cause an event on the child - a message like "Target Locked"
    };
}
}

Answer 1

My doubt is about to do the opposite way: Child capture the event of the parent. Remember the child will never have the selector of the parent. That's why it's really different.

我认为混淆是因为您不需要事件。对于parent → child 通信，只要给child 添加另外一个input 属性即可。并将父属性绑定(bind)到它:

<child-component [anotherInputProperty]="someParentProperty" ...

然后，每当您更改父组件中 someParentProperty 的值时，Angular 更改检测会将新值传播给子组件:

if(evt.keyCode === 13) {
    // Need to cause an event on the child - a message like "Target Locked".
    // Just change the property value:
    this.someParentProperty = "some new value";
    // Angular will take care of propagating the new value to the child
};

如果您希望子项在输入属性值更改时执行某些逻辑，请在子项中实现 ngOnChanges()。

如果问题是您不想每次都更改消息，那么您可以

• 使用a shared service with an Observable并让 child subscribe() 到 Observable，或者
• 使用随机值作为消息的前缀或后缀，并使用 | 或您可以拆分的其他字符将其与消息分开，以便您可以轻松地在 child 中提取消息。

您还可以在共享服务中使用 Subject 而不是 Observable:参见 Parent and children communicate via a service .