兄弟组件Angular2之间的通信

Question

我甚至需要在一个组件上创建一个单击，它将在其父组件中显示同级组件，但不确定如何执行此操作。我理解使用输入和输出的父/子通信，但这不是那样的。

所以我有这个结构：

• -Parent Component

• - Child One

• - 儿童二

所以它们在我父组件的html中，

<app-child-one></app-child-one>
<app-child-two></app-child-two>

Child One和Child两个组件都是弹出窗口，因此在Parent组件中单击时，我会显示Child One组件（现在弹出窗口），在弹出窗口中我有按钮Next，它应显示Child Two组件。

我不能在Child One中嵌入Child Two，因为有更多弹出窗口，我想保持它有点组织。

这是我的代码：

父组件：

<app-one *ngIf="popupOne" [(popupOne)]="popupOne"></app-one>
<app-two *ngIf="popupTwo" [(popupTwo)]="popupTwo"></app-two>

popupOne和popupTwo都设置为false。

第一部分：

Input() popupOne: boolean; 
Input() popupTwo: boolean; 
Output() popupOneChange= new EventEmitter<boolean>(); 
Output() popupTwoChange= new EventEmitter<boolean>(); 
close() { this.popupOne.emit(false); } 
openPopupTwo() { this.popupTwoChange.emit(true); } 

第二部分：

Input() popupTwo: boolean; 

Answer 1

appOne没有将popupTwo变量注册为输出。

将其添加为<app-one *ngIf="popupOne" [(popupOne)]="popupOne" [popupTwo]="popupTwo"></app-one>，可以解决您的问题。