Angular：隐藏父组件中的show child组件

Question

我处理角度5.我有两个组件，COMP1（这有一个按钮A）和COMP2（这有一个按钮B）。 加载COMP1时，应隐藏COMP2。 当我点击COMP1上的buttonA时，COMP2应该是可见的，当我点击COMP2上的buttonB时，COMP2应该隐藏。

如何实现这一目标？

COMP1是：

<COMP2></COMP2>
<button>buttonA</button>

COMP2是：

<button>buttonB</button>

Answer 1

在comp1组件中有一个布尔值，它跟踪是否应该显示按钮b：

export class Comp1Component {
  showComp2: boolean = false;
}

在comp2组件内部有一个输出，当单击按钮时会发出该输出：

export class Comp2Component {
  @Output() buttonClick = new EventEmitter<void>();
}

然后将comp1的模板更改为：

<COMP2 *ngIf="showComp2" (buttonClick)="showComp2 = false"></COMP2>
<button (click)="showComp2 = true">buttonA</button>

将comp2的模板更改为：

<button (click)="buttonClick.emit()">buttonB</button>