在两个不同的组件中实现来自 Angular 4 服务的方法

Question

我在 2 个差异组件中使用了一项服务：一个在分页按钮上，第二个在侧边栏中。这两个组件处于同一级别。 问题是按钮组件上的方法有效，但如果我在侧边栏上使用它们就不起作用。

服务

public navigate(action: string) {
 if (typeof this.ACTIONS[action] === 'undefined')
 return;

 let shift = this.ACTIONS[action];
 this.setCurrent(shift);

 const curr = this.getCurrent();
 this.activeIndex = curr.index;
 return this.router.navigate([curr.name]);
}

public setDisableFirst() {
 const curr = this.getCurrent();
 if(curr.index == 0) {
  return true;
 }
}

public setDisableLast() {
 const curr = this.getCurrent();
 return ((curr.index + 1) == (this._pages.length)) ? true : false;
}

public setActiveIndex() {
 const curr = this.getCurrent();
 return 'done-' + curr.index;

}

按钮

 public disableFirst() {
  return this.PrevNextService.setDisableFirst();
 }

 public disableLast() {
  return this.PrevNextService.setDisableLast();
 }

 <button type="button" (click)="navigate('PREV')" [disabled]="disableFirst()">
 <button type="button" (click)="navigate('NEXT')" [disabled]="disableLast()">

侧边栏

 public activeClasss() { 
  return this.PrevNextService.setActiveIndex();
 }


 <div class="list-group-wrapper"  [ngClass]="activeClasss()">

如果我在以下方法中控制台登录服务 const curr = this.getCurrent();：navigate、setDisableFirst、setDisableLast，当我单击下一步或从按钮返回时，我会得到准确的页码（1、2、3 等）组件。

Service 的最后一个方法 setActiveIndex 使用与上述方法相同的变量。在这里，在服务中，如果控制台日志const curr = this.getCurrent(); 我只得到我现在的第一（1）页。如果我继续单击下一个或上一个按钮，则此 const 保持不变（1）。

我使用 Angular 4。有人可以告诉我为什么会出现这种行为吗？

Answer 1

您是如何注册服务的？你有它在你的一个模块的提供者数组中吗？类似于下面显示的ProductService？

您是否在多个模块中注册了它？还是在组件中？

要使服务作为单例正常工作，它的提供者只需要通过提供者数组在一个地方注册，如下所示。

@NgModule({
  imports: [
    SharedModule
    ])
  ],
  declarations: [
    ProductListComponent
  ],
  providers: [
    ProductService
  ]
})
export class ProductModule {}