如何在同一个html模板上调用两次的两个相同组件之间共享相同的数据

Question

我创建了一个在表格上方和下方使用的分页组件。

问题是他们为每个调用创建不同的内存引用。

因此创建了一个自相矛盾的观点，如下所示：-

表格上方

下表

我们可以看到 html 上的数据相同，8 数字在两者上都显示为活动状态，但两个组件持有的数组包含不同的数据。
如何镜像这两个组件并确保它们共享相同的数据？
任何帮助都会非常感谢！

Answer 1

如果您将数据移动到服务，则组件的两个实例可以共享同一个服务实例，因此共享相同的数据。

这对你有用吗？

这是我拥有的一个示例服务，它在多个组件之间共享这两个值：

服务

import { Injectable } from '@angular/core';

@Injectable()
export class ProductParameterService {
  showImage: boolean;
  filterBy: string;

  constructor() { }

}

使用服务的类然后获取属性并将其设置到服务中。

使用服务的类

get showImage(): boolean {
    return this.productParameterService.showImage;
}
set showImage(value: boolean) {
    this.productParameterService.showImage = value;
}