如何在angular的两个子组件之间进行通信？ [重复]

Question

这个问题已经在这里有了答案：

• 如何在组件之间共享数据/更改 2个答案

我在angular 2中非常新。在两个组件之间进行通信时遇到问题。 当我有一个包含父组件和一些子组件的布局时，可以很容易地使用@Input注释设置子组件的变量。

但是现在我有了一个父组件（主要用于布局）和两个子组件的布局：

子组件2具有一堆按钮，这些按钮仅创建一条简单消息。 现在，我想在子组件一中显示此消息。

我该如何解决？ 提前致谢

Answer 1

除了使用@Input / @Output和父组件作为“桥”的解决方案之外，一种常见的方式还在于引入共享服务。 该服务需要在父组件中提供，以便子组件可以共享该服务的单个实例（ 如何在Angular 2中创建单例服务？ ）。

使用BehaviorSubject作为委托的基本示例：

@Injectable()
export class SharedService {

    messageSource: BehaviorSubject<string> = new BehaviorSubject('');

    constructor() { }
}

子组件1：

export class ChildComponent1 {

    constructor(private _sharedService: SharedService) { }

    sendMessage(): void {
        this._sharedService.messageSource.next('Hello from child 1!');
    }
}

子组件2：

export class ChildComponent2 {

    constructor(private _sharedService: SharedService) {
        this._sharedService.messageSource.subscribe((message: string) => {
            console.log('Message: ', message); // => Hello from child 1!
        });
     }
}

也请参阅此帖子： Angular2-使用服务的组件之间的交互

Answer 2

一种简单的方法是在您的子component2中使用@Output设置一个输出作为事件发射器，并在单击按钮时发出一个事件，并将消息作为其数据传递。 然后，在父组件中侦听此事件，并在事件发生时更新设置为子组件1输入的属性。

下图是一个清楚地说明机制的示例

Answer 3

您可以使用模板变量来引用同级：

<child1 #child1></child1>
<child2 (someOutput)="child1.doSomething($event)"></child2>

Answer 4

您可以使用@ViewChild和@Output更新子组件中的属性。

或者，您可以使用@Input代替@ViewChild 。

seidme建议的方法也可以正常工作。 这仅取决于您的用例。

使用@ViewChild和@Output ： https : @Output ? @Output = @Output

使用@Input和@Output https://plnkr.co/edit/01iRyNSvOnOG1T03xUME?p=preview