Question

我試圖切換@ViewChild元素與*ngIf，然後調用本機事件。

這是我的html元素，用#audioPlayer裝飾，所以我可以通過@ViewChild提取元素。

<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。不過，我真的希望在不需要它的地方銷燬元素。

我this答案，你可以使用@ViewChild一個setter看到，所以我實施了，然而沒有成功...

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

......然而，這總是輸出audioPlayer set called >> undefined undefined

我有也嘗試將this.conversationIsRunning = true;從其當前位置拆分並放入各種不同的生命週期掛鉤中，然後還將ngOnChanges更改爲其他生命週期掛鉤以及無效。

我必須等到下一幀或什麼嗎？爲什麼那個set audioPlayer mutator會收到undefined？

Answer 1

在第一個代碼示例中，您應該使用ngAfterViewInit()而不是ngOnChanges()。