0

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

组分 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;
}

这对我行得通！

但是，如果我对组件 B.ts 中的 closeMerge() 执行相同操作：

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

那是行不通的。没有错误，什么也没发生。逻辑上应该切换视图，但事实并非如此。

如何让它活起来？先感谢您！

4

2 回答 2

0

你可以使用@Output & EventEmitters，所以本质上只是将点击事件传递给父组件A。

在组件 B 中

<li><button type="button" (click)="sentCloseMerge()"></button><li>

@Output() componentBClicked= new EventEmitter();

public sentCloseMerge() {
    this.componentBClicked.emit();
}

在组件 A

<app-component-B (componentBClicked)='closeMerge()'></app-component-B>

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

我不确定语法是否为 100%，所以我不会只是复制粘贴，但这就是想法！这有帮助吗？

于 2020-03-05T19:14:20.173 回答
0

组件 B 是组件 A 的子组件。您可以阅读这篇关于在 Angular 组件之间共享数据的文章。使用 EventEmmiter 监听来自每个组件的事件

于 2020-03-05T19:10:53.447 回答