IONIC 4-事件ionViewWillEnter仅触发一次 [英] IONIC 4 - The event ionViewWillEnter only fires once

问题描述

请，我正在构建一个带有Firebase Firestore的Sidemenu Ionic应用程序，当它打开时，该应用程序会显示我的收藏和数据，但是当在带有Sidemenu的页面之间浏览并返回到数据页面时，没有任何数据返回，我需要刷新浏览器页面以再次查看数据.我已经检查了生命周期，并且ionViewWillEnter事件仅触发一次.

Please, I am building a Sidemenu Ionic app with firebase firestore, when it opens, the app shows my collections and data, but when browsing between pages with sidemenu and returning to the data page, there is no data return nothing, I need to refresh a browser page to see the data again. I already checked the life cycle and the ionViewWillEnter the event only fires once.

import { Component, OnInit } from '@angular/core';
import { Evento, EventoService} from 'src/app/services/evento.service';
import { Router, RouterEvent } from '@angular/router';
import { LoadingController, NavController } from '@ionic/angular';


@Component({
  selector: 'app-eventos',
  templateUrl: './eventos.page.html',
  styleUrls: ['./eventos.page.scss'],
})


export class EventosPage{

  
  eventos: Evento[];

  pages = [
    {
      url: '/menu/eventos',
    }
  ];

  selectedPath = '';

  constructor(private eventoService: EventoService, private router: Router, 
    private loadingController: LoadingController, private navCtrl: NavController) {
    this.navCtrl.setDirection('root');
  }


  ionViewWillEnter(){
   console.log(' Teste 3: ionViewWillEnter ')
    this.eventoService.getAllEventos().subscribe(res => {
      this.eventos = res;
      let dateString = 'item.data';
      let newDate = new Date(dateString);
      this.loadEvento();
    });
  }
  
  async loadEvento() {
    const loading = await this.loadingController.create({
      message: 'Carregando eventos...',
      spinner: 'crescent',
      duration: 300

    });
    return await loading.present();
  }

}

<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>Eventos</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content padding>

  <ion-card class="card" *ngFor="let item of eventos" lines="inset" button [routerLink]="['/detailsEvento', item.id]"
    routerdirection="forward">
    <ion-card-header>
      <ion-card-title class="texto"> {{item.nome}}</ion-card-title>
      <ion-card-title class="texto"> Data: {{item.data | date:'dd/MM/yyyy'}}</ion-card-title>
    </ion-card-header>
  </ion-card>

</ion-content>

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';

import { IonicModule } from '@ionic/angular';

import { EventosPage } from './eventos.page';

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

const routes: Routes = [
  {
    path: '',
    component: EventosPage
  }
];

@NgModule({
  imports: [
    FontAwesomeModule,
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes)
  ],
  declarations: [EventosPage]
})
export class EventosPageModule {}

import { Injectable } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection } from 'angularfire2/firestore';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';


export interface Evento {
  nome: string;
  data: string;
  horario: string;
  local: string;
  descricao: string;
}

@Injectable({
  providedIn: 'root'
})
export class EventoService {
 
 
  private eventosCollection: AngularFirestoreCollection<Evento>;
  private eventos: Observable<Evento[]>;

  constructor(db: AngularFirestore) { 
    this.eventosCollection = db.collection<Evento>('eventos', ref => ref.orderBy('data'));

    this.eventos = this.eventosCollection.snapshotChanges().pipe(
      map(actions => {
        return actions.map(a => {
          const data = a.payload.doc.data();
          const id = a.payload.doc.id;
          return{ id, ...data };
        });
      })
    );
  }
  

getAllEventos(){
  return this.eventos;
}

  getEvento(id){
    return this.eventosCollection.doc<Evento>(id).valueChanges();
  }

}

推荐答案

constructor(
private afStore: AngularFirestore,
private router: Router,
) {
this.router.events.subscribe((evt) => {
  if (evt instanceof NavigationEnd && this.router.url === '/main-screen/home') 
 {
    this.storage.get('userInfo').then((val) => {
      if (val) {
        // console.log(val);
          this.profesion = val.Profesion ? val.Profesion : 'popular';
          if ( this.profesion === 'popular') {
            this.allCollectionVideo();
          } else {
            this.getDefaultProfesion(this.profesion);
          }
        }
      });
    }
  });
}

它可以解决您的问题.

这篇关于IONIC 4-事件ionViewWillEnter仅触发一次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！