javascript - 当服务中数据发生变化时如何通知组件

Question

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

这是我的服务...

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

还有组件...

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

  constructor(
    private errorHandlerService: ErrorHandlerService

  ) {
    this.errorHandlerService.apiError$.subscribe(data => {

      alert("error in component = " + data);

    });
  }

  onNoClick(): void {
    // this.dialogRef.close();
  }

  ngOnInit() {
    this.errorHandlerService.apiError$.subscribe(data => {

      alert("error in component = " + data);

    });
  }

}

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