angular - @Input 绑定(bind)可以在 Angular 中被观察到吗？

Question

我正在创建一个在输入字段下显示验证错误的组件。如果显示错误消息，并且用户提交了表单，我想闪现消息以引起他们的注意。

我想知道是否可以使用可观察对象作为输入绑定(bind)？

这样我就可以在观察到任何数据时订阅输入和闪存。

这是我的想法的一个例子:

@Component({..})
export class MessageComponent implement OnChanges {
   @Input()
   public flash: Observable<any>;

    public ngOnChanges(changes: SimpleChanges): void {
        if ('flash' in changes) {
            (<Observable<any>> changes['flash'].currentValue).subscribe(() => {
                // trigger the flash animation here
            });
        }
    }
}

我想不通的是这是否会泄漏内存，以及我应该如何/何时取消订阅(或者是否有必要取消订阅)。

Angular 允许这种做法吗？

Answer 1

是的，您可以使用可观察对象作为输入。

您是否需要退订取决于相关的可观察对象。当可观察对象完成或出错时，所有订阅者都会自动取消订阅。因此，一般来说，如果您知道一个可观察对象已完成，则无需显式取消订阅。

但是，查看您的代码段，这似乎是次要问题，因为您编写的代码表明您希望输入发生变化。

在这种情况下，您应该在发生更改时取消订阅。否则，您将有两个订阅者 - 第一个订阅者仍在收听原始的 flash observable。

import { Subscription } from 'rxjs/Subscription';

@Component({..})
export class MessageComponent implement OnChanges, OnDestroy {

    @Input()
    public flash: Observable<any>;
    private flashSubscription: Subscription;

    public ngOnChanges(changes: SimpleChanges): void {
        if ('flash' in changes) {
            if (this.flashSubscription) {
                this.flashSubscription.unsubscribe();
            }
            this.flashSubscription = (<Observable<any>> changes['flash'].currentValue).subscribe(() => {
                // trigger the flash animation here
            });
        }
    }

    public ngOnDestroy(): void {
        if (this.flashSubscription) {
            this.flashSubscription.unsubscribe();
        }
    }

我还会在 ngOnDestroy 中调用 unsubscribe - 这样对于未完成或出错的 flash observable 将发生取消订阅。

请注意，多次调用订阅的 unsubscribe 方法是安全的。