时间戳

首页 > 解决方案 > 从服务调用组件函数 - 可能的循环依赖 - Angular

javascript - 从服务调用组件函数 - 可能的循环依赖 - Angular

问题描述

我希望能够从我的参与服务（服务）中的 filterComponent（组件）调用一个函数

我的 filterComponent 中的函数访问一个位于engagementService 中的数组——它使用这个数组的数据添加到它的html 模板中的一个单选按钮中。

它成功地访问了数组，因为我在 filterComponents 构造函数中包含了engagementService（我通过单击函数对其进行了测试，但在功能上这不起作用，因为我需要单选按钮在加载后具有名称）。

这个数组的数据是在我的主页加载后填充的，因为数据是从engagementService中的端点检索的，所以我希望仅在加载图表后（异步）调用这个函数，图表函数在engagementService中，如以及其他代码，在数组填充数据后，我可以从我的 filterComponent 有效地调用此函数，因此它可以工作。

我可能没有以最好的方式做到这一点，因为我在engagementService 中有一个数组，该数组填充了来自端点的数据，然后我想从使用该数组的engagementService 中的filterComponent 调用该函数。

所以数据是一种方式，而不是另一种方式。我有第二个组件，我也可以在其中调用该函数，因为我在那里调用图形函数，但我也遇到了同样的问题。

如果我在构造函数中添加组件类，我会得到“无法解析 EngagementService 的所有参数：（[object Object]，？）。”

如果我只是将类作为变量包含在内，它也不起作用。

我的 filterComponent：我可以在构造函数中成功调用我的服务（engagementService，并且我从那里访问数组 - this.engagementService.orgSubSidNames。

  @Injectable()
  export class EngagementFilterComponent implements OnInit {
  public subsidiaryForm: FormGroup;
  public subsidiaryOptions: Array<RadioButtonGroupOptions>;
   public orgSubSidNames = [];

  @Output() updateSubSids = new EventEmitter;

  constructor(private builder: FormBuilder, public engagementService: EngagementService) { }

  ngOnInit(): void {

    this.subsidiaryForm = this.builder.group({ subsidiary: new FormControl() });
    this.subsidiaryForm.valueChanges.subscribe(data => this.updateSub(data.subsidiary, resolve));

  namesAsOrgs({ includeOpportunities, orgSubSidNames }) {
    return orgSubSidNames.map((name, i) => {
      return {
        label: name,
        value: `${i}`,
        selected: this.includeOpportunities
      }
    })
  }

  subSidNamesToRadioButton() {
    console.log('we are calling here within the subsidnamesto radio button ')
    const subSids = this.namesAsOrgs({
      includeOpportunities: true,
      orgSubSidNames: this.engagementService.orgSubSidNames
    })

    this.subsidiaryOptions = subSids;
  }

我的服务：（如果我在构造函数中包含了engagementFilter，或者甚至只是调用了系统不加载的类内部的类，并且在构造函数中它给出了一个错误，提示“无法在engagementService 构造函数中解析对象参数”。

Getordsubsiaries 创建名称数组，然后将其保存在组件函数中调用的 orgSubSidNames 中。这有效！但当然我需要异步调用该函数，因为名称是由端点检索的。

    @Injectable()
   export class EngagementService {
  public orgSubSidIds = [];
  public graphParams: IGraphParams = {

  }

  constructor(private http: WefHttp) {
    this.baseURL = `${environment.ews_api_host}/${ENDPOINTS.api}`;
    this.organization = this.focus = new EngagementRoot();
  }


  getOrgSubsidiaries(id) {
    return this.organizationSubsidiaries(id)
  .subscribe(data => {
    console.log('subsidiaries data' + JSON.stringify(data));

    let subsidiaryNames = []
    data.forEach(sub => {
      subsidiaryNames.push(sub.SubsidiaryName)
    })
    subsidiaryNames = subsidiaryNames.filter(this.onlyUnique);

    this.orgSubSidNames = subsidiaryNames;

  });
 }

此 getOrgSubsidiaries 在系统首次加载时被调用。

标签： javascriptangular

解决方案

你目前正在做的事情是不可能的。您不能在service构造函数或任何其他component's构造函数中注入组件。这不是控制component.

如果你真的想从服务中调用组件的方法，那么你可以使用SubjectorBehaviorSubject然后从组件中订阅它。

服务.ts

private _source = new BehaviorSubject<boolean>();
public source$ = this._source.asObservable();   // observable to be subscribed from the component

getOrgSubsidiaries(id) {
    return this.organizationSubsidiaries(id)
        .subscribe(data => {
            console.log('subsidiaries data' + JSON.stringify(data));

            ...........................
            this.orgSubSidNames = subsidiaryNames;

            //emit event
            this._source.next(true);
        });
}

组件.ts

constructor(private builder: FormBuilder, public engagementService: EngagementService) { }

ngOnInit(){
   // subscribe to emitter(BehaviourSubject) of service
   this.engagementService.source$.subscribe(
   (data)=>{
       if(data){
           // call component method here every time when event is emitted
       }
   })
}

推荐阅读