其他服务角度2中的注入服务问题

时间:2017-06-27 10:31:26

标签: angular typescript angular2-services

在其他服务中注入服务时遇到了麻烦。 我有一个ContactService来使用handleError方法从服务器获取数据。 我有一个AlertService来从handleError方法中抛出错误。 我已经在我的核心模块中声明了contactService和AlertService。 但是当我调用alertService.submitNewMessage时,它显示this.alertService未定义。 请帮忙

@Injectable()
export class AlertService {
  private $currentMessages: BehaviorSubject<string> = new BehaviorSubject('');
  public currentMessages: Observable<string> = this.$currentMessages.asObservable();
  constructor() { }

  submitNewMessage(msg: string): void {
    this.$currentMessages.next(msg);
  }

}

并联系服务

@Injectable()    
export class ContactService {


      private contactsUrl = 'http://localhost/customers';
      constructor(
                  private http: Http,
                  private router: Router,
                  private alertService: AlertService
                  ) { }

      getContactsFromService(): Observable<SubmitCustomerHttp[]>  {
        return this.http.get(this.contactsUrl)
                        .map(this.extractData)
                        .catch(this.handleError);
      }

      private extractData(res: Response) {
        return HttpHelper.extractData(res);
      }

      handleError(error: Response | any) {
        let errMsg: string;
        console.log('Receive error: ', error);
        if (error instanceof Response) {
          const body = error.json() || '';
          const err = body.error || JSON.stringify(body);
          errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
          if (error.status === 500 || 400 || 404) {
            window.alert(errMsg);
            this.alertService.submitNewMessage(errMsg);
            return errMsg;
          }
        } else {
          errMsg = error.message ? error.message : error.toString();
          console.log('Error Message: ', errMsg);
          return null;
        }
      }
    }

我的核心模块

@NgModule({
  imports: [
    CommonModule,
    HttpModule,
    JsonpModule

  ],
  declarations: [],
  providers: [
    AlertService,
    ContactService,

  ]
})


export class CoreModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: CoreModule,
      providers: [
        AlertService,
        ContactService,

      ]
    };
  }
}

1 个答案:

答案 0 :(得分:1)

我怀疑的问题与

有关
return this.http.get(this.contactsUrl)
                .map(this.extractData)
                .catch(this.handleError);

这会将类方法注册为回调,这是不正确的,因为this无法正确绑定。

你可以通过将它们包含在箭头函数中来解决这个问题,这样当到达代码时,this仍然会引用服务而不是引用回调函数:

return this.http.get(data => this.contactsUrl(data))
                .map(data => this.extractData(data))
                .catch(data => this.handleError(data));