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

您可以像这样使用主机属性来获取 parent

@Output() action: EventEmitter<string>;

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

编辑输入您的 parent 作为摘要 class

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

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

Answer 3

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

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

Angular @Output: Can we detect if function is done when emitting?

observable

eventemitter

output

angular-components

angular