LifeCycle Anrufe werden nicht auf Router-Navigation genannt

Question

Ich habe diese Routen

einrichten

{path:'home', component:HomeComponent, canActivate: [AuthGuard]}, 
{path:'profile', component:UserProfileComponent, canActivate: [AuthGuard] }, 

und in meiner navbar.component ich habe folgendes

 <li class="nav-item" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact: true}"> 
      <a [routerLink]="['/home']" class="nav-link"><i class="fas fa-home fa-2x"></i></a> 
     </li> 
     <li class="nav-item" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact: true}"> 
      <a [routerLink]="[ '/profile']" class="nav-link"><i class="fas fa-user fa-2x"></i></a> 
     </li> 

in meinem home.component im Daten von meinem Firebase-Dienst in der ngOnInit() erhalten

ngOnInit() { 
    this.firebaseService.getPodcasts().subscribe(podcasts => { 
     this.podcasts = podcasts; 
    }); 

dies nur ha ppps das erste Ich navigiere nach Hause, aber wenn ich zum Profil gehe (Von der Navigationsleiste) und dann zurück nach Hause, wird das ngOnInit nicht aufgerufen (ich habe versucht, das Log-in zu loggen und nichts passiert). aber wenn ich die URL zum Beispiel https://localhost/4200/home schreibe, dann aktiviert es den ngOnInit() lifecycle.

Ich bin nicht sicher, wie relevent das ist, aber hier ist mein HTML für die app.component:

<div class="app-container"> 

    <app-navbar *ngIf="authService.getAuthState()" (updateSideNav)='toggleSideNavParent($event)'> 
    </app-navbar> 
    <flash-messages></flash-messages> 

    <router-outlet> 
    </router-outlet> 
</div> 
<div *ngIf="authService.getAuthState()" class="sidenav-overflow" [ngClass]="{'show-overflow':isSideNavOpen}"> 
    <app-sidenav [isSideNavOpen]='isSideNavOpen'></app-sidenav> 
</div> 

und in meinem home.component:

<div class="jumbotron"> 
<h1>home</h1> 
    <app-record></app-record> 
    <app-content [allPodcasts]="podcasts"></app-content> 
</div 

Answer 1

ok so war das problem nicht mit dem ngOnInit sondern mit firebaseFirestore. wenn ich die ngOnInit geladen und rief

this.firebaseService.getPodcasts().subscribe(podcasts => { 
     this.podcasts = podcasts; 
    }); 

nannte es nie aus irgendeinem Grund. aber ich änderte sich die firebaseService.getPodcasts() aus:

public getPodcasts(){ 
     return this.podcasts; 
    } 

An:

public getPodcasts(){ 
    this.podcasts = this.podcastCollection.snapshotChanges().map(changes => { 
    return changes.map(a => { 
     const data = a.payload.doc.data() as Podcast; 
     data.id = a.payload.doc.id; 
     return data; 
    }) 
    }) 
    return this.podcasts; 
} 

und jetzt funktioniert es .. Ich verstehe immer noch nicht, warum, weil in der firebaseService Konstruktor i

gesetzt

this.podcasts = this.podcastCollection.snapshotChanges().map(changes => { 
    return changes.map(a => { 
     const data = a.payload.doc.data() as Podcast; 
     data.id = a.payload.doc.id; 
     return data; 
    }) 
    })