Question

我有两个组件和一个由两个组件共享的共享服务。

shared.service.ts

// ..... top level codes are skipped

private pickAnalysisForBubble = new Subject<any>();

  analysisForBubble$ = this.pickAnalysisForBubble.asObservable();

  mapToggleToPointOrBubble(value) {
    this.pickAnalysisForBubble.next(value);
  }

utility.component.ts

在视图（utility.component.html）中，有两个单选按钮，其中一个是预选的：

<input type="radio" name="rdbBubblePoint" class="rdbBubblePoint" value="Point" (change)="changeToPoint($event)"> Point<br>
<input type="radio" name="rdbBubblePoint" class="rdbBubblePoint" value="Bubble" (change)="changeToPoint($event)" checked="checked"> Bubble<br>

在组件（utility.component.ts）中，有一种获取click事件的方法:(我已导入shared.service并将其添加为提供者。）

changeToPoint(event){
    # analysisInteraction is the shared service constructor
    this.analysisInteraction.mapToggleToPointOrBubble(event.target.value);
}

map.component.ts

我导入了shared.service并添加了一个构造函数。然后在ngOnInit尝试subscribe更改了，但这不起作用。

# analysisInteraction is the shared service constructor
this.analysisInteraction.analysisForBubble$.subscribe(
        data => {
          this.DrawType = data;
          console.log("Drawtype fixed");
      });

我正在使用subject根据此tutorial检测更改。我做错了什么？

Answer 1

我猜你没有共享同一个服务实例。您是在引导应用程序时还是在主要组件中指定相应的提供程序：

bootstrap(AppComponent, [ SharedService ]);

或

@Component({
  (...)
  providers: [ SharedService ]
})
export class AppComponent {
  (...)
}

如果您在子组件的providers属性中指定它，则无法共享同一个实例...

修改

由于分层注入器，每个组件都有自己的实例，而不是共享相同的实例。因此，应将共享服务添加为main组件中的提供程序。此外，共享服务不应包含在子组件的提供者中。

angular2主题未订阅更改

1 个答案: