Question

*ngIfで@ViewChild要素を切り替えようとしていますが、その後、ネイティブイベントを呼び出します。

これは私の#audioPlayerで装飾されているので、@ViewChildで要素を抽出することができます。私のtypescriptですで

<audio 
    #audioPlayer  
    *ngIf="conversationIsRunning"  
    [src]='activeConversation?.clips[activeConversation.activeClipId].audio.blob' 
    (ended)="audioComplete($event)" 
    autoplay controls preload="auto" > 
</audio> 

私は次があります。

@ViewChild('audioPlayer') audioPlayer; 
private conversationIsRunning: boolean; 

ngOnInit() { 
    this.conversationIsRunning = false; 
} 

ngOnChanges() { 
    console.log("ngOnChanges"); 
    this.conversationIsRunning = true;  
    console.log(this.audioPlayer); // undefined 
    this.audioPlayer.nativeElement.play(); // error 
} 

私はaudio要素から*ngIfを削除する場合は、エラーが消えます。しかし、私はそれが必要でないときに要素が破壊されている場所でこの機能を本当に望んでいます。

私はあなたが私はしかし、これは常に私が持っている audioPlayer set called >> undefined undefined

を出力し...、ということがありません成功へ...

private privAudioPlayer: ViewContainerRef; 
@ViewChild('audioPlayer') set audioPlayer(audioPlayer: ViewContainerRef) { 
    this.privAudioPlayer = audioPlayer; 
    console.log('audioPlayer set called >> ', audioPlayer, this.privAudioPlayer); 
}; 

実装@ViewChildにセッターを使用することができますthisの回答で見た

また、this.conversationIsRunning = true;を現在の場所から分割し、さまざまなライフサイクルフックに入れて、ngOnChangesを他のライフサイクルフックに変更しても役に立たないようにしました。

次のフレームなどを待つ必要がありますか？なぜset audioPlayerミューテータはundefinedを受け取っていますか？

Answer 1

最初のコード例では、ngOnChanges()の代わりにngAfterViewInit()を使用する必要があります。