如何在同一个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;
}