2017-12-21 11 views
0

で呼び出されていない私は、このルートは私のnavbar.componentライフサイクルコールがルータのナビゲーション

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

とにを設定している私は私のhome.componentイムで

 <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> 

を以下していますngOnInit()のfirebaseサービスからデータを取得する

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

最初に私は家に移動しますが、プロファイルに行くと(navbarから)、そして家に帰ると、ngOnInitは呼び出されません(私は内部でログを記録しようとしましたが何も起こりません)。しかし、URLを例えばhttps://localhost/4200/homeと書くと、ngOnInit()ライフサイクルがアクティブになります。

<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> 

と私のhome.component中:

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

ときに設定する理由

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; } 

、今それが動作..私はまだ理解していない:

public getPodcasts(){ return this.podcasts; } 

へ:しかし、私はfirebaseService.getPodcasts()から変更しましたあなたはアドレスバーにルートを入力します - それはサーバーに行く - ので、アプリケーションは最初から再作成されます。なぜあなたはngOnInitを使用しますか?コンストラクタ内で同じ呼び出しを行うことはできますか? –

+0

はい私はコンストラクタでそれを試してみましたが、同じ問題が発生しました。私は経路の間を移動するときにコンストラクタを呼び出さない。 – KLTR

答えて

0

私はこれがあるが、ここではapp.componentのための私のHTMLですreleventかどうかはわかりませんokだから、問題はngOnInitではなくfirebaseFirestoreであった。私はngOnInitをロードし

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

呼ばれるたび は、それはいくつかの理由のためにそれを呼び出されることはありません。なぜならfirebaseServiceコンストラクタで、私は

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; 
    }) 
    }) 
関連する問題