Angular 两个依赖组件，第二个组件的更改必须更改第一个组件

Question

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

组件 1

分析总数 = 2

组件 2（表格）

筛选依据：[无]

1. 分析 1 的样本
2. 分析 1 的
3. 样本 分析 2 的样本

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

---

组件 1

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

组件 2 （表格）

过滤依据：[1,2,3]

1. 分析 1 的样本
2. 分析 1 的样本
3. 分析 2 的
4. 样本 分析 3 的
5. 样本 分析 3 的样本

添加了来自另一个屏幕的分析 2,3,4。正确的总计应该是 4，而不是 2。但是过滤器 API 只更新了表。 （分析 4 中的样本与过滤器不匹配）。

---

(!!) 您无法从表中计算或推断总计。因此您无法使用输出事件进行更新。因为过滤器不会返回所有值。

我对解决方案的想法

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

因此，我需要两个组件和一个调用（以解决同步问题）。 因此，我为该 GET 调用创建了一个父组件，然后使用 Input() 将标签数据发送到组件 1，将表数据发送到组件 2。

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

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

Answer 1

有两种情况：

父子关系

如果 component-1 是父级，component-2 是其子级，那么您可以使用 < code>Outupt 装饰器定义一个 EventEmitter，一旦调用过滤器函数、获取结果并计算总和，就会发出该事件。

@Output() filterUsed = new EventEmitter();

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

然后在父 component-1 标签中使用 Event-Binding component-2

及其内部getNewSum(sum)函数，更新父组件中sum的值；

不相关的组件

如果component-1和component-2不相关，那么您可以添加中间件服务 将被注入到两个组件中。

该服务必须包含一个observable，component-2（接下来）将使用该observable来为component-1携带新的sum值（订阅）。

Answer 2

假设您使用应用程序选择器以父子方式设置组件，则可以使用组件 2 的输出事件告诉组件 1 有关新总数的信息。

EG：

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