angular - 仍在与角度可观察的战斗

问题描述

我以为我终于开始理解这一点了，但显然我仍然缺少一些东西。我正在尝试在我的应用设置服务中使用 BehaviorSubject 创建可观察对象。我想我理解正确创建 observable 的步骤。但是现在当我有一些新的值来更新 observable 时，Angular 会抛出一个运行时告诉我 next 对于我的 Behavior 服务是未定义的。

这是更新的代码：

import { Input } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import { BehaviorSubject } from 'rxjs';
import { AppSettings } from '../shared/app-settings';
import { APPSETTINGS } from "../shared/defaultSettings";
import { Inject, Injectable } from '@angular/core';
import { LOCAL_STORAGE, StorageService } from 'angular-webstorage-service';
import { LogService } from 'src/app/services/app-log.service';


@Injectable()
export class AppSettingsService {
  className: string;
  settings: AppSettings;

  @Input()
    // Use of BehavioirSubject. This is where you post values into
    private _settings$: BehaviorSubject<AppSettings> = new BehaviorSubject<AppSettings>(APPSETTINGS)
    // Settings observer. This is where you read from outside
    settings$: Observable<AppSettings> = this._settings$.asObservable();



    constructor(private logger: LogService,
                @Inject(LOCAL_STORAGE) private storage: StorageService) {
      this.className = this.constructor.toString().match(/\w+/g)[1];
      /*
       * First, we check to see if this is the first time the app has
       * been run on this machine. If it is, then local storage will return
       * null when we ask for the settings. We'll populate local storage
       * with the default settings values before we continue on setting up 
       * the service.
       */
       this.settings = this.storage.get('TRACS3_SETTINGS');
       if ( this.settings == null ) {
         try {
          this.storage.set('TRACS3_SETTINGS', APPSETTINGS);
         }
         catch(e) {
           console.log(this.className, 'Machine does not support local storage. ');
         }
       }

       /* 
          AppSettings are now initialized, set the initial value of them for all other
          components will use to monitor them.
        */
       console.log(this.className, 'about to set observable iniitial values');
       this.settings = this.storage.get('TRACS3_SETTINGS');
       this._settings$ = this.storage.get('TRACS3_SETTINGS');
       console.log(this.className, 'just changed observabe to ',     this._settings$);
}


    public saveSettings(settings: AppSettings): void{
      console.log(this.className, 'saving settings in service, new settings: ', settings);
      //this._settings$.post(settings)
      this.storage.set('TRACS3_SETTINGS', settings);
      this._settings$.next( settings );
    }


  //public getSettings(): AppSettings {
    //eturn this.storage.get('TRACS3_SETTINGS');
  //}

}

现在我遇到了不同的错误。如果我尝试使用这行代码设置观察者：

this._settings$ = this.settings;

我收到错误消息：

Type 'AppSettings' is missing the following properties from type 'BehaviorSubject<AppSettings>': _value, value, _subscribe, getValue, and 19 more.ts(2740)

但是当我把它放到上面显示的值（=this.storage.get...）时，我现在得到运行时错误

我在我的智慧在这里结束。除了可能完全放弃 Angular 之外，我没有别的什么可做的。

标签： angularrxjs

在您的构造函数中，您重新_settings$分配 this._settings$ = this.storage.get('TRACS3_SETTINGS');

该字段现在是任何值TRACS3_SETTING，我猜这不是任何类型的 Observable。

你应该用this._settings$.next(this.storage.get('TRACS3_SETTINGS'));它来改变它的内部值

angular - 仍在与角度可观察的战斗

问题描述

解决方案

推荐阅读