@Input绑定可以成为Angular中的可观察对象吗？

Question

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

我想知道是否可以使用observable作为输入绑定？

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

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

@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

是的,您可以使用observable作为输入.

您是否需要取消订阅取决于所讨论的可观察性.当观察完成或出现错误时,任何订阅者都会自动取消订阅.因此,通常,如果您知道可观察的完成,则不需要显式取消订阅.

但是,查看您的代码段,这似乎是次要问题,因为您编写的代码表明您希望输入更改.

在这种情况下,您应该在发生更改时取消订阅.否则,您将拥有两个订阅者 - 第一个仍在侦听原始flash可观察者.

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

我还打电话unsubscribe的ngOnDestroy-这样的退订会为出现flash不完整或错误可观.

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