更新服务中声明的变量时更新组件变量

Question

当我的服务中声明的变量发生变化时，我试图更新我的组件中声明的变量。我为此使用 Subject。然而，什么也没有发生。

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


import { AppComponent } from './app.component';
import { ShareDataService } from './share-data.service';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [ShareDataService],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';
import { ShareDataService } from './share-data.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  _subscription;
  constructor(private shareDataService:ShareDataService)
  {
    //this.title=this.shareDataService.title;
    this._subscription = shareDataService.titleChange.subscribe((value) => { 
      this.title = value; 
      //alert(this.title);
      console.log("COmponent::::::::::::::"+this.title);
    });
  }
}

shareDataService.ts

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';
@Injectable()
export class ShareDataService {
  title:string="TITLE";
  titleChange: Subject<string> = new Subject<string>();
  constructor() {
    setTimeout(
      function()
      {

      this.title="BACDEF";

      //console.log(this.title);
      this.titleChange.next(this.title);
    }
    ,1000);
   }
}

对于在服务中定义的主题，它给出了一个错误说 "Cannot read property 'next' of undefined"。什么是最合适的实施方式？

Answer 1

使用箭头函数：

setTimeout(() => {
  this.title="BACDEF";
  this.titleChange.next(title);
}, 1000)

或绑定：

setTimeout(function() {
  this.title="BACDEF";
  this.titleChange.next(title);
}.bind(this), 1000)

消除该错误。否则setTimeout回调中的this是一个window对象

Answer 2

What would be the most appropriate way to implement this?

您可以使用 BehaviorSubject 而不是 Subject，因为

订阅 BehaviorSubject returns 最后一个值，而 Subject 直到 onnext 才触发，所以使用 BehaviorSubject 你不需要无论您何时订阅，都不必担心您的组件拥有最新数据。
如果您想在 non-observable 代码中检索 BehaviorSubject 的最后一个值（无需订阅），您始终可以使用 getValue() 方法.

更新服务中声明的变量时更新组件变量

Updating component variable when variable declared in service is updated

angular

angular2-services

StackBlitz