角度两个相关组件，第二个组件的变化必须第一个组件的改变

标签和同一页上有多行的表。标签需要与表同步。

组件1

分析总数=2

组件2(表格(

filterBy:[none]

您可以看到组件1依赖于2。问题是组件2中的表有一个筛选器输入字段。当您过滤并按下输入时，它将执行API调用。返回的列表可能有所不同，因为我们的应用程序的另一部分添加了新的分析。

组件1

分析总数=2(问题：过滤器调用后的值相同。其他页面的用户添加了分析。(

组件2(表格(

filterBy：[1，2，3]

从另一个筛选分析中添加了2、3、4。正确总数应为4，而不是2。但过滤器API只更新了表。(来自分析4的样品与过滤器不匹配(。

(！！(您无法从表中计算或推导合计。因此，您无法使用Output事件进行更新。因为筛选器不会返回所有值。

我对解决方案的看法

我曾想过对标签和表使用一个GET调用。一个调用一次检索过滤后的表和总分析，从而解决同步问题。但是标签和表需要是可重复使用的，是两个独立的组件。

所以，我需要两个组件和一个调用(以解决同步问题(。周四，我为那个GET调用创建了一个父组件，然后使用Input((将标签数据发送到组件1，将表数据发送给组件2。

问题我进行了一次头脑风暴，思考如何使用SignalR和任何其他解决方案。这看起来是一个非常常见的场景，所以我想问一下。您会使用什么解决方案？

编辑示例，强调无法从表数据中计算标签数据

假设您已经用应用程序选择器以父子方式设置了组件，那么您可以使用组件2的输出事件来告诉组件1新的总数。

例如：

<component1>
<component2 (totalChange)="totalChanged($event)"></component2>
</component1>

在子组件中，您需要声明一个输出事件发射器：

@Output()
totalChanged: EventEmitter<number> = new EventEmitter<number>();

然后在组件2中调用api之后，当您获得新数据时，发出新的总值：

// make API call and get new data
// emit event with new total of data
this.totalChanged.emit(newTotal);

然后在组件1中，您可以添加一个名为"totalChanged"的函数：

public totalChanged(total: number){
this.total = total;
}

有两种情况：

父子关系

如果component-1是父级，component-2是其子级，则可以使用Outupt装饰器来定义一个EventEmitter，该CCD_4将在调用filter函数、获取结果并计算总和后发出。

@Output() filterUsed = new EventEmitter<number>();

filter(input) {
....
this.sum = ....;
this.filterUsed.emit(this.sum);
}

则在父CCD_ 6中使用CCD_

<app-component-2 (filterUsed)="getNewSum($event)"></app-component-2>

并在getNewSum(sum)函数内部更新父组件中的和的值；

不相关的组件

如果component-1和component-2不相关，则可以添加一个中间件服务，该服务将被注入这两个组件中。

此服务必须包含一个可观察，component-2(下一个(将使用该来为component-1(订阅(携带一个新的sum值。

相关内容