如何在服务中更改数据时通知组件

时间:2018-02-22 11:01:49

标签: javascript angular

我有一个自定义错误处理程序服务,只要应用程序出现错误就会收到通知,现在我想通知组件有关错误的信息,以便组件向用户显示错误对话框,我试过了事件发射器观察者,但没有任何东西在通知组件...

这是我的服务......

  val typeface = Typeface.createFromAsset(applicationContext.assets, "font/roboto.ttf")
        speedometerAdvance.setTypeface(typeface);

组件......

@Injectable()
export class ErrorHandlerService implements ErrorHandler {
  public apiError: Subject<any> = new BehaviorSubject(false);
  apiError$ = this.apiError.asObservable();
  constructor(private errorLogService: ErrorLogService
  ) {}

  handleError(error) {
    this.apiError.next(error); 
    console.log("ERROR = " + error);
  };}

3 个答案:

答案 0 :(得分:1)

具有以下格式的方法可以使服务执行的输出成功与否。希望以下代码能为您提供帮助

   //Code in service.ts
   @Injectable()
    export class ErrorHandlerService implements ErrorHandler {
        public apiError: Subject<any> = new BehaviorSubject(false);
        apiError$ = this.apiError.asObservable();
        constructor(private errorLogService: ErrorLogService
        ) { }

        private handleError(error) {
             return Observable.throw(error.json().msg || 'Server error');
        }
        _forgotPassword(userId, passwords, isResetPwd) {
            return this.http.post(this.forgotPasswordUrl,
                {
                    userId: userId,
                    passwords: passwords,
                    isResetPwd: isResetPwd
                })
                .map(res => res.json())
                .catch(this.handleError);
        }
    }

 //Code in component class file

  this.errorHandlerService._forgotPassword(userId, passwords, isResetPwd).
  subscribe(data => {
    // Code here.....
   });

答案 1 :(得分:0)

这就是我修复它的方法......

app.component.html

<error-log></error-log>

错误log.component

import { Component, OnInit } from '@angular/core';
import { ErrorLogService } from './error-log.service';

@Component({
  selector: 'error-log',
  templateUrl: './error-log.component.html',
  styleUrls: ['./error-log.component.scss']
})
export class ErrorLogComponent implements OnInit {

  constructor(private errorLogService: ErrorLogService) { }

  ngOnInit() {
    this.errorLogService.apiEvent.subscribe(data =>{

            alert("error in errorlog component through errorLogService event emitter = " + data);
          })

          this.errorLogService.apiError$.subscribe(data =>{
            alert("error in errorlog component errorLogService  = " + data);
          })
  }

}

错误handler.service

import { Injectable, ErrorHandler} from '@angular/core';
import { ErrorLogService } from './error-log.service';

    @Injectable()
    export class ErrorHandlerService implements ErrorHandler {
      constructor(private errorLogService: ErrorLogService
      ) {}

      handleError(error) {
        this.errorLogService.setError(error);
      };}

错误log.service

import { Injectable, ErrorHandler, EventEmitter, Output} from '@angular/core';
import { EventListener } from '@angular/core/src/debug/debug_node';
import { ReplaySubject} from 'rxjs/Rx';

@Injectable()
export class ErrorLogService  {
  public apiError: ReplaySubject<any> = new ReplaySubject();
  public apiEvent:EventEmitter<any> = new EventEmitter();
  public apiError$ = this.apiError.asObservable();
  constructor() {
    // super();
  }

  setError(error){
    this.apiEvent.emit(error);  
     this.apiError.next(error); 
    // super.handleError(error);
    console.log("ERROR = " + error);
  } }

不知道为什么我不能直接从error-handler.service

引发事件

答案 2 :(得分:-2)

如果在服务收到错误后初始化组件,那么他只能发出初始化后收到的错误。

用户ReplaySubject以发出所有先前的错误

@Injectable()
export class ErrorHandlerService implements ErrorHandler {
  public apiError: ReplaySubject<any> = new ReplaySubject();
  apiError$ = this.apiError.asObservable();
  constructor(private errorLogService: ErrorLogService
  ) {}

  handleError(error) {
    this.apiError.next(error); 
    console.log("ERROR = " + error);
  };}