データが変更されたときのコンポーネントの再作成

Question

この質問には多くの回答があるようですが、私は何をすべきかを理解できませんでした。

私は現在、他の子コンポーネントから再生ボタンをクリックしたときに作成される子コンポーネントがあります。これは、親とデータを共有し、次に親がデータを渡し、子オーディオプレーヤコンポーネントを作成するサービスを通じて起こります。私が抱えている問題は、ユーザーが別のページに移動して、そのページのオーディオを再生するためにクリックして、古いオーディオが引き続き存在し、新しいオーディオが開始しない場合です。

古いオーディオコンポーネントを破棄して新しいオーディオonclickを作成するためのライフサイクルフックや方法がありますか？

情報ボックス - 再生ボタンをクリックしたときに最初の起動が行われる場所。

export class InfoBoxComponent implements OnInit { 
    ... 

    activateAudioPlayer(session) { 
    this.newAudioService.newAudio(session) 
    } 
} 

新しいオーディオサービス

export class NewAudioService { 
    newActiveAudioSource: Subject<string> = new Subject<string>(); 

    newAudio(session) { 
    this.newActiveAudioSource.next(session); 
    } 

    newActiveAudio$ = this.newActiveAudioSource.asObservable(); 
} 

フロントエンドコンポーネント - 情報ボックスやオーディオプレーヤー

@Component({ 
    template: `<audio-player *ngIf='newActiveAudio' [newActiveAudio]='newActiveAudio'></audio-player>`, 
}) 

export class FrontendComponent implements OnInit { 

    ... 

    ngOnInit() { 
    this.sub = this.newAudioService.newActiveAudio$.subscribe(
     newActiveAudio => { 
     this.newActiveAudio = newActiveAudio; 
     }); 
    } 

    ngOnDestroy() { 
    // prevent memory leak when component destroyed 
    this.sub.unsubscribe(); 
    } 
} 

Answer 1

可能な方法を設定することができた親コンポーネントthis.newActiveAudio = falseその後、角度の更新プログラムをsetTimeout()と表示をさせますnewActiveAudioの新しい値を設定します。