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

它提示错误说＆＃34;无法读取属性＆＃39; next＆＃39;未定义＆＃34;对于服务中定义的主题。什么是最合适的实现方式？

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是一个窗口对象

Answer 2

实施此方法最合适的方式是什么？

您可以使用issue 444代替Subject，因为

订阅时，BehaviorSubject返回最后一个值，而Subject在onnext之前不会触发，因此使用BehaviorSubject您不必担心您的组件拥有最新数据，无论您何时订阅。
如果要在不可观察的代码（没有订阅）中检索BehaviorSubject的最后一个值，可以始终使用getValue()方法。
< / LI>

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

2 个答案:

`BehaviorSubject`