Javascript Angular 2服务从组件调用方法

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

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调用的响应中获得了所需的新数据

调用来自组件-->组件服务-->apiclient服务

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

编辑2：我试图避免使用
组件服务
，并仅使用
组件-->apiclient服务使其对我有效

就连这个解决方案目前也在为我工作，我有点不喜欢它，因为我必须从我的api中复制和粘贴许多代码，用于同一个“操作”和其他对象。例如，我让它为图片组件工作，但我的电影组件也需要它。通常，如果我在一个项目中经常编写相同的代码，这是一件坏事，或者我不经常编写相同的代码？
至少有几种方法可以解决这个问题，但希望这能给您一个开始。接受反馈和纠正

使用可观察的
让服务拥有值更改的知识并发出更改。组件侦听服务上的EventEmitter，以对值更改作出反应。（另见：）

MyAppService

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

MyAppService

MyAppComponent

感谢AJT_82注意到Angular不希望开发人员在服务上使用EventEmitter:
至少有几种方法可以解决这个问题，但希望这能给你一个开始。接受反馈和纠正

使用可观察的
让服务拥有值更改的知识并发出更改。组件侦听服务上的EventEmitter，以对值更改作出反应。（另见：）

MyAppService

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

MyAppService

MyAppComponent

感谢AJT_82注意到Angular不希望开发人员在服务上使用EventEmitter:
可能，是的，但是您如何获得对组件的引用？@stealththeninja不
私有myAppComponent:myAppComponent做这个把戏？不，我不知道你为什么认为它会被注入到你的服务中？在服务中调用这个方法的效用是什么？正如@stealththeninja所说，您的组件的引用在哪里？所以你可以看到前面的变化……我认为你必须做的是相反的，你必须从你的组件调用服务的方法
putValue
，然后调用
setValue
可能，是的，但是你如何获得组件的引用？@stealthteninja不
私有myAppComponent:myAppComponent做这个把戏？不，我不知道你为什么认为它会被注入到你的服务中？在服务中调用这个方法的效用是什么？正如@stealththeninja所说，您的组件的引用在哪里？因此，您可以看到前面的更改…我认为您必须做的是相反的，您必须从组件调用服务的方法
putValue
，然后调用
setValue
谢谢。我明天要工作。我仍然相对基本的角度，但这似乎是一个很好的阅读/帮助我！我建议不要使用EventEmitter:Thank@AJT_82我会马上修改我的答案谢谢。我明天要工作。我仍然相对基本的角度，但这似乎是一个很好的阅读/帮助我！我建议不要使用EventEmitter:Thank@AJT_82我将在稍后修改我的答案
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);
    }); 
  }
}

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

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

export class MyAppComponent {
  public value;

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