角2服务调用方法从组件

Question

甚至可以让服务调用组件方法吗？

myapp.component

export class MyAppComponent {
  public value;
  ...
  public setValue(payload){
    this.value = payload;
  }
}

myapp.service

@Injectable()
export class MyAppService {
  private myAppComponent: MyAppComponent;
  private apiClientService: ApiClientService

  // ...
    After i make an PUT http call, the body from the response is my new "value"
  // ...

    putValue(payload: JSON){

    return this.apiClientService.putAPIObject(payload).then((response) => {
      this.myAppComponent.setValue(response);
    }); 
  }
}

这将导致一个错误：Uncaught（在promise中）：TypeError:无法读取未定义的的属性“setValue”。

有人能解释我做错了什么吗？提前谢谢。

编辑：由于人们抱怨我的方法，如果有人能向我解释什么是处理这个问题的最佳方法，我完全可以从头开始。

我从api中获取值，更改它们，然后将它们放回api。我不想再次进行get调用，因此我在Put调用的响应中获得了所需的新数据。

呼叫从组件发出

我想问题是在起点和终点之间我有一个额外的服务。

编辑2：我试图避免使用组件服务，只使用组件就可以了--

即使这个灵魂在我不喜欢的时候也对我有用，因为我必须从我的api中用其他对象复制和粘贴许多相同“操作”的代码。例如，我让它为图片组件工作，但我也需要这个为我的电影组件。通常情况下，如果我在一个项目中经常写相同的代码，这是一件坏事，或者不是？




Answer 1

至少有几种方法可以解决这个问题，但希望这能给你一个开始。接受反馈和纠正。

让服务自身对价值的认知发生变化，发出变化。组件监听 <罢工> 一个事件发射器 1服务对值变化做出反应。（另请参阅：从Angular 2服务创建和返回可观察）

MyAppService

import { Subject } from 'rxjs/Subject';

@Injectable()
export class MyAppService {
  private valueSource = new Subject<any>();
  public valueUpdate$ = this.valueSource.asObservable();

  putValue(payload: JSON){
    return this.apiClientService.putAPIObject(payload).then((response) => {
      /** here **/
      this.valueUpdate$.next(response);
    }); 
  }
}

MyAppComponent

export class MyAppComponent {
  public value;
  private valueSubscription;

  constructor(private _myAppService: MyAppService) {}

  ngOnInit() {
    /** and here **/
    this._myAppService.valueUpdate$.subscribe((p) => this.setValue(p));
  }
  ...
  public setValue(payload){
    this.value = payload;
  }
}

回答最初的问题，我们的想法是向服务注册组件，以便它可以根据需要调用组件。您可以通过依赖项注入获取引用，但不推荐（例如，如果您的原始组件引用被破坏了怎么办？）

MyAppService

@Injectable()
export class MyAppService {
  private myAppComponent: MyAppComponent;

  /** here **/
  registerMyApp(myApp: MyAppComponent) {
    this.myAppComponent = myApp;
  }

  putValue(payload: JSON){
    return this.apiClientService.putAPIObject(payload).then((response) => {
      this.myAppComponent.setValue(response);
    }); 
  }
}

MyAppComponent

export class MyAppComponent {
  public value;

  /** and here **/
  constructor(myAppService: MyAppService) {
    myAppService.registerMyApp(this);
  }
  ...
  public setValue(payload){
    this.value = payload;
  }
}

1. 感谢AJT_82指出Angular不希望开发人员在服务上使用EventEmitter：EventEmitter的正确用法是什么