Angular @Output：我们可以检测发射时功能是否完成吗？

Question

我有一个Angular Component 和一个Output。当我 emit 和 event 到这个 output 时，将调用一个 async 函数（这个函数在组件之外）。

在component 内部，我想知道这个外部函数何时完成。有什么办法吗？

这是我的组件的一些代码：

@Output() action: EventEmitter<string>;

itemClicked(item) {
    this.action.emit();
    // When the function of the observer is done: this.hideMenu();
}

这是组件之外的代码：

<my-component (action)="getData()"></my-component>


getData() : Promise<any> {
    ...
}

有什么方法可以检测到组件内部的“getData”函数已经完成了吗？

在 AngularJS 中我可以这样做：

scope: {
    action: '&'
}
...

    scope.itemClicked = function(item) {
        $q.when(item.action()).finally(function() {
            scope.hideMenu();
        });
    };

编辑：

我正在考虑另一个受Ionic 的复习启发的解决方案。如果 emit() 调用将我的组件实例作为参数传递怎么办？这样，getData 函数可以执行以下操作：

getData(menu): Promise<any> { 
    ...
    menu.hideMenu();
}

您如何看待这个解决方案？如果您认为这是错误的，那么我想我会选择 Input。

Answer 1

我认为您应该在函数完成后使用@Input 发送完成的消息，并在感兴趣的组件中使用set 监听输入，并在知道函数完成后做您想做的事情。

Answer 2

AngularJS & 绑定被错误地转换为 Angular。正确的对应物是Input:

@Input() actionCallback: () => Promise<any>;

itemClicked(item) {
    this.actionCallback().then(...);
}

使用如下：

<my-component [actionCallback]="getData">

虽然Output 提供不应该反馈的单向交互。 getData 应了解其职责并通过回调或 RxJS 主题提供反馈：

@Output() action: EventEmitter<Function>;

itemClicked(item) {
    this.action.emit(this.onClick);
}

onClick = () => {
  this.hideMenu();
}

使用如下：

<my-component (action)="getData($event)"></my-component>

getData(callback) : Promise<any> {
    ...
    .then(callback);
}

Answer 3

您可以像这样使用 Host 属性来获取父级

@Output() action: EventEmitter<string>;

constructor(@Host() private parent: ParentComponent) {
    parent.getData().subscribe(...);
}

EDIT将你的父类输入为抽象类

constructor(@Host() private parent: ConcernedParent) {
    parent.getData().subscribe(...);
}

export abstract class ConcernedParent {
  public abstract getData(): Observable<any>;
}