Angular2全局变量服务

时间:2017-05-16 08:16:18

标签: angular typescript angular-services

我正在尝试创建一个全局变量来处理何时在我的网站上显示加载程序。我跟着this但是我收到了以下错误。

Generic Type'Observer'在此行上需要1个类型的参数

this.ShowLoaderChange = new Observable((observer:Observer){

我也似乎无法看到他们为ChangeObserver声明变量的位置,因为我在这里使用:

this.ShowLoaderChangeObserver = observer;

在这里

this.ShowLoaderChangeObserver.next(this.ShowLoader);


import { Observer } from 'rxjs/Observer';
import { Observable } from 'rxjs/Observable';
import { Injectable } from 'angular2/core';
import { Subject }    from 'rxjs/Subject';

@Injectable()
export class LoaderService {
  public ShowLoader;
  ShowLoaderChange: Observable<any>;

  constructor() {
     this.ShowLoaderChange = new Observable((observer:Observer){
         this.ShowLoaderChangeObserver = observer;
     })
  }

  setData() {
    this.ShowLoader = !this.ShowLoader;
    this.ShowLoaderChangeObserver.next(this.ShowLoader);
  }
}

修改: 根据下面的答案更改我的代码之后它有意义得到TypeError:无法在[null]中读取未定义的属性'next' 这来自

this.ShowLoaderChangeObserver.next(this.ShowLoader);

我正在调用这个函数

import {LoaderService} from '../LoaderService'
export class AdminDashboardComponent implements OnInit{
constructor (private loader:LoaderService){}

ngOnInit():any{
   this.loader.setData();

} }

编辑:新服务

import { Observer } from 'rxjs/Observer';
import { Observable } from 'rxjs/Observable';
import { Injectable } from 'angular2/core';
import { Subject }    from 'rxjs/Subject';

@Injectable()
export class LoaderService {
   public ShowLoader: boolean;
   ShowLoaderChange: Observable<boolean>;
   ShowLoaderChangeObserver: Observer<boolean>;

   constructor() {
      this.ShowLoaderChange = new Observable((observer:Observer<boolean>) 
     => {
         this.ShowLoaderChangeObserver = observer;
        })
   }

  setData() {
      this.ShowLoader = !this.ShowLoader;
      this.ShowLoaderChangeObserver.next(this.ShowLoader);
  }

}

1 个答案:

答案 0 :(得分:1)

您需要指定您的observable将作为type参数生成的值的类型。在您的情况下,因为您已将可观察量键入为ShowLoaderChange: Observable<any>,您可以指定观察者的类型:

this.ShowLoaderChange = new Observable((observer:Observer<any>) => {
    this.ShowLoaderChangeObserver = observer;
});

但是查看你的代码,你可以输入你的observable为boolean并避免使用any,因为你只是从观察者那里得到布尔值:

export class LoaderService {
  public ShowLoader: boolean;
  ShowLoaderChange: Observable<boolean>;
  ShowLoaderChangeObserver: Observer<boolean>;

  constructor() {
     this.ShowLoaderChange = new Observable((observer:Observer<boolean>) => {
         this.ShowLoaderChangeObserver = observer;
     })
  }

  setData() {
    this.ShowLoader = !this.ShowLoader;
    this.ShowLoaderChangeObserver.next(this.ShowLoader);
  }
}