使用 RxJS fromEvent 收听角度动画

Question

我正在尝试监听角度动画的

@animation.done

事件。 我用过

@HostListener

@HostListener('@animation.done', ['$event'])
    onAnimationDone(): void {
     console.log('Animation Done);
    }

它表现得很好，但现在我想使用 RxJS 的

fromeEvent

。我试过：

fromEvent(this.hostElementRef.nativeElement, '@animation.done')
            .pipe(tap(() => console.log('animation end')))
            .subscribe();

可悲的是，什么也没发生。 使用

@HostBinding

应用动画：

@HostBinding('@animation') animated = true;

Answer 1

HostBinding

和

HostListener

可以使用常规事件和代码中 Angular 所引用的事件作为“合成主机属性”（在我们的例子中为“合成主机事件”）。 这些似乎正在使用元数据，但实际上并未绑定到主机。

因此仅依赖 DOM 事件的

fromEvent

无法检测到这些。

当您深入研究动画的包代码时，您会发现监听依赖于 listenOnPlayer 函数，该函数使用 AnimationPlayer 的方法，如果您查看 NoopAnimationPlayer 实现，则该函数仅由一组侦听器支持。