There are numerous answers to my question, but I am struggling to understand what steps I should take.
Currently, I have a child component that is generated when a play button in another child component is clicked. This process occurs through a service that shares the data with the parent component. The parent then passes this data and creates my audio player child component. The issue I am facing is that if the user navigates to another page and attempts to play audio there, the old audio continues to play while the new audio does not start.
I am wondering if there is a specific lifecycle hook or method that I can use to destroy the old audio component and create a new one when clicked?
Info Box - Initial activation upon clicking the play button.
export class InfoBoxComponent implements OnInit {
...
activateAudioPlayer(session) {
this.newAudioService.newAudio(session)
}
}
New Audio Service
export class NewAudioService {
newActiveAudioSource: Subject<string> = new Subject<string>();
newAudio(session) {
this.newActiveAudioSource.next(session);
}
newActiveAudio$ = this.newActiveAudioSource.asObservable();
}
Frontend Component - Parent Component of Info Box and Audio Player
@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();
}
}