在组件中编辑动态承诺

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

然后，将内部组件绑定到相同的网桥服务，如下所示：

export class InnerComponent  {
constructor(abs: AppendingBridgeService) { }
onClick(){
this.abs.next(importantParameter);
}
}

最后，如果您想将内部组件与Outside组件中的promise的结果联系起来，那么您可以创建另一个桥接服务，它采用另一种类型，在您的情况下是PagedData<any>。