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

我已经创建了一个分页组件，我正在表的上方和下方使用它

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

因此产生了如下矛盾的观点：-

上表

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

下表

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

正如我们所看到的，html上的数据是相同的，

8

number在这两个组件上都显示为活动的，但是两个组件保留的数组包含不同的数据。
如何镜像这两个组件并确保它们共享相同的数据？

---

任何帮助都很好，谢谢

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

那对你有用吗

下面是一个示例服务，它在多个组件之间共享这两个值：

服务

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

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

使用该服务的类

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

---

^同意。这将如何在两个组件之间创建通信？如果用户更改了值，则分页组件的任一实例都可以将该值设置到服务中。因为在上面的示例中，showImage和filterBy属性在UI中绑定，所以当值发生更改并且重新评估其绑定时，更改检测将自动通知组件。。。导致调用getter。。。它从服务中获取共享值。我有一个plunker在这里演示：这个plunker是两个路由组件，但两个“子”组件的概念是相同的。upvoted！感谢您花时间澄清问题，这是您的plunker中的最后一件事，您在a和b类组件中创建了get和set方法，或者它们应该在数据服务中？您尝试了什么？这是如何建造的？@joshvito我试图寻找解决方案，但没有找到，很明显，这个问题有其建造的原因！我不介意ppl否决我的问题，除非我不断分享和收集新问题的知识！