兄弟组件之间的通信Angular2

Question

即使在一个组件中，我也需要创建一个点击，它会在其父组件中显示兄弟组件，但不知道如何去做。我理解使用输入和输出的父母/孩子通信，但这不是那样工作的。

所以我有这样的结构：

• -Parent组件

• - 儿童一台

• - 儿童两个

所以他们在我父组件的html，

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

Child One和Child两个组件都是弹出式菜单，所以在父组件中单击时，我显示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>，应该解决您的问题。