如何绑定Angular 8中的组件？

Question

我希望这是一个简单的问题，但我有点坚持。我有下一个结构：

组件A

<ng-template [ngIf]="flaggedRecords">
...
<button (click)="showComparisonWindow(pi);">MERGE RECORDS</button>
...
</ng-template>
<ng-container *ngIf="showMergeCompare">
  <app-component-B></app-component-B>
</ng-container>

组件B

<div>
...
<li><button type="button" (click)="closeMerge()"></button><li>
...
</biv>

我有一个具有条目和按钮列表的组件A，这些条目和按钮应该隐藏组件A的视图并显示组件B的内容。组件B有一个X按钮，它应该关闭组件B并再次显示组件A。

我在组件A.ts中描述过

public showComparisonWindow(pi: number) {
    this.showMergeCompare = !this.showMergeCompare;
    this.flaggedRecords = !this.flaggedRecords;
}

对我有用！

但是如果我对component-B.ts中的closeMerge（）做同样的操作，则为：

public closeMerge() {
    this.showMergeCompare = !this.showMergeCompare;
    this.flaggedRecords = !this.flaggedRecords;
}

这不起作用。没有错误，什么也没发生。从逻辑上讲，应该切换视图，但不是。

如何使它变得生动？先感谢您！

Answer 1

组件B是组件A的子组件。您可以阅读此article有关在Angular组件之间共享数据的信息[>]