角异步管道不适用于fromEvent

Question

Stackblitz ：https://stackblitz.com/edit/angular-w7vlnu

我正在使用Observable从HTMLAudioElement创建一个fromEvent：

playTime(): Observable<any> {
    return fromEvent(myMediaElement, 'play').pipe(
        map(e => e.type + Date.now())
    );
}

playTime()通过@Input()传递给子组件

在组件中，当我订阅时：

// component.ts

@Input() currentTime: Observable<any>;

playDate = '';

ngOnInit {
    this.currentTime.subscribe(v => this.playDate = v);
}

// component.html

// will render
{{ playDate }}  

// will not render
{{ currentTime | async }}

我尝试过ChangeDetectorRef.detectChanges()和Application.tick()，但无济于事。

我需要了解fromEvent以及订阅的工作方式吗？由BehaviorSubject构造的其他Observables在此组件中正常工作

Answer 1

我检查了您的Stackblitz。并不是直接通过 引用模板中的服务将服务函数作为@Input（）传递的方法。

因此，与其像当前那样在模板中引用服务，要么：

<audio-container [currentTime]="audio.currentTime()">

您应该创建一个新的Observable，它将引用服务中的一个，然后在模板中使用它。

<audio-container [currentTime]="$currentTime">

app.component.ts

$currTime: Observable<any>;

constructor(public audio: AudioPlayerService) {
  this.$currentTime = this.audio.currentTime();
}

Stackblitz

咨询：请勿直接从模板引用服务变量/函数。

坏：

<button (click)="audio.play(version1)">Play Song 1</button>

好：

<button (click)="play(version1)">Play Song 1</button>

play(version) {
   this.audio.play(version).subscribe(...);
}