代码之家 › 专栏 › 技术社区 › KLTR

路由器导航时不调用生命周期调用

angular4-router lifecycle angular2-routing angular

KLTR · 技术社区 · 7 年前

我已经安排好了路线

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

在我的 导航栏。组成部分 我有以下几点

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

在我家。组件im从ngOnInit()中的firebase服务获取数据

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

这只会在我第一次导航到主页时发生,但如果我转到profile(从导航栏)然后返回主页,则不会调用ngOnInit(我尝试在内部控制台登录,但什么都没有发生)。但是当我写URL的时候 https://localhost/4200/home 然后它确实激活了ngOnInit()生命周期。

我不确定这是否相关,但这是我的HTML 应用程序。组成部分 :

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

在我的 家组成部分 :

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

1 回复 | 直到 7 年前

KLTR 7 年前

好吧,问题不在于ngOnInit,而在于firebaseFirestore。每当我装上ngOnInit并打电话时

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

它从来没有因为某种原因叫过它。但我改变了 firebaseService.getPodcasts() 发件人:

public getPodcasts(){
      return this.podcasts;
    }

收件人:

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

现在它工作了。。我仍然不明白为什么,因为在我设置的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;
    })
  })