Question

我希望能够从我的engagementService（服务）内部的filterComponent（component）调用函数

我的filterComponent中的函数访问一个engagementService中的数组-它使用该数组的数据添加到其html模板中的单选按钮中。

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

从我的engagementService内的端点检索数据后，加载我的主页后，将填充该数组的数据，因此我希望仅在图形（异步）加载后调用此函数，graph函数位于参与服务，以及其他代码，在该数组中填充数据后，我可以从我的filterComponent有效地调用此函数，因此它可以工作。

我可能不是以最好的方式完成此操作的，因为我在engagementService中拥有一个数组，该数组中填充了来自端点的数据，然后我想从engagementService中的filterComponent调用使用该数组的函数。

因此，数据沿一种方式发展，而并非双向发展。我还有第二个组件，在那里我也可以调用函数，就像我在其中调用graph函数一样，但是我也遇到了同样的问题。

如果我在构造函数中添加组件类，则会得到“无法解析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;
  }

我的服务：（如果我在构造函数中包含了交战过滤器，或者甚至只是在系统内部不加载该类中的类，并且系统在构造器中给出了错误消息“无法在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在首次加载系统时调用。

Answer 1

无法执行当前操作。您不能在service构造函数或任何其他component's构造函数中注入组件。这不是控制component的方法。

如果您真的想从服务中调用组件的方法，则可以使用Subject或BehaviorSubject，然后从组件中订阅它。

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

component.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
       }
   })
}

从服务调用组件功能-可能的循环依赖关系-角度

1 个答案: