javascript - 在组件中编辑动态 Promise

Question

我有一个将 Promise 作为输入的组件:

export class Component  {
    @Input() appendingFunction: Promise<PagedData<any>>
}

“appendingFunction”可能如下所示:

async foo(importantParameter, parameter1,..parameter n): Promise<PagedData<City>>

现在，在解析 appendingFunction 之前，我想设置 importantParameter。我知道它会存在，但我不知道如何定义它。我不关心可能存在的任何其他参数。

我该怎么做？

完整结构:

外部组件 1:

export class OutsideComponent1{
   async foo(importantParameter, x):Promise<PagedData<boolean>>{
   ...
   }
}

外部组件 2:

export class OutsideComponent2{
   async foo(importantParameter, x, y, z):Promise<PagedData<number>>{
   ...
   }
}

两者的 HTML:

<inner-component [appendingFunction]="foo()"></inner-component>

内部组件:

export class InnerComponent  {
    @Input() appendingFunction: Promise<PagedData<any>>

onClick(){
  //thats what i would need
  appendingFunction.setImportantParameter();
   appendingFunction.then(() => doSomething)

}

Answer 1

我建议您以不同的方式思考您的解决方案。

您可以创建服务，AppendingBridgeService ，如下:

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';

@Injectable({
  providedIn: 'root'
})
export class AppendingBridgeService {
  private _importantParam = new Subject<any>();
  importantParam$ = this._importantParam.asObservable();

  constructor() {}

  public next(nextParam: string) {
    this._importantParam.next(nextParam);
  }
}

然后，在您的 Outside 中组件，将此服务声明为依赖项:

export class OutsideComponent1{
  constructor(abs: AppendingBridgeService) {
    this.abs.importantParam$.subscribe(nextParam => {
      this.foo(nextParam, x).then(pagedData => {
        doSomething;
      });
    });
  } 
}

然后，将内部组件绑定(bind)到相同的桥接服务，如下所示:

export class InnerComponent  {
    constructor(abs: AppendingBridgeService) { }

    onClick(){
        this.abs.next(importantParameter);
    }
}

最后，如果您想将内部组件与Outside中的promise结果联系起来。组件，您可以创建另一个桥接服务，以相反的方式并接受另一种类型，在您的情况下，PagedData<any> .