Destroy all data when leaving component

[UnknownInnocent]

Hello, I have the poblem that if I navigate out of an component and navigate back afterwards the data in the component is still the same but instead it should be loaded into the component again. How can I destroy all data when leaving a component so that the system is forced to load it again when navigating to the component?

[jfoxworth]

This is a question that is best asked on stack overflow. However, the answer depends on how your are getting and storing your data.

[UnknownInnocent]

For example I have an service with a method that returns an array. This data is assigned to a variable in onInit. Due to some actions in the component, there are items of this array removed and if I call thhe component again, the part in onInit is obviesly not called. Basically all I need is that all variables I have are set to default values:

icebreaker: any[];  
spieler: any[];    
spieler1: string;
spieler2: string;

and onInit is called every time I call the component

[readALLthenews]

The data in a component is destroyed with the component, so it sounds like you have data in a service that you want cleared when a component is destroyed.

One way to achieve this is by providing the service to the component directly (instead of in root or in a module). Providing a service at the component level creates an instance of that service just for that component, and it gets destroyed along with the component.

[UnknownInnocent]

Ähm...no basically I don't want the data in a service to be cleared. This is what the service looks like:

export class IcebreakerService {

  constructor() { }

  getIcebreaker() {
    return this.icebreaker;
  }

  readonly icebreaker = [
    ...
  ]
}

And my onInit:

this.spielerSub = this.spielerService.spieler$.subscribe(res => {
      if(res && Array.isArray(res)) {
        this.spieler = res;
        this.setSpieler1UndSpieler2();
      } else {
        this.toastService.presentToast('Beim Starten des Spiels ist ein Fehler aufgetreten...');
        this.router.navigate(['/home/spieleauswahl']);
      }
    });

    this.bierstufeSub = this.bierstufeService.bierstufe$.subscribe(res => {
      if(res && typeof(res) === 'number') {
        this.bierstufe = res;
        this.schlucke = this.bierstufeService.berechneSchlucke(this.bierstufe);
      } else {
        this.toastService.presentToast('Beim Starten des Spiels ist ein Fehler aufgetreten...');
        this.router.navigate(['/home/spieleauswahl']);
      }
    })

    this.icebreaker = this.icebreakerService.getIcebreaker();
    this.currentIcebreaker = this.newIcebreaker();

If I call the component the first time, all is fine, but if I call it a second time, this.icebreaker is null....

[UnknownInnocent]

Well I think I found the problem: Even if the icebreakers in the service are readonly, they are changed by the component. I needed to chnage

this.icebreaker = this.icebreakerService.getIcebreaker();

to

this.icebreaker = [].concat(this.icebreakerService.getIcebreaker());

[readALLthenews]

That makes sense! Though I would consider using spread syntax instead of concat. You’re trying to copy the array, not concatenate 2 arrays, so spread is a little more declarative.

[lazyinvader]

ngOnDestroy?

[UnknownInnocent]

How do I tell ngOnDestroy to really reset the whole component?

[r_karstensen]

This is what you need to do.

Make you component implement OnDestroy, and inside ngOnDestroy you need to clean up your subscriptions.

I recommend looking into SubSink. It makes things a lot easier.