Wait for an event before load a ionic3 deeplinked page

Question

I have an Ionic3/Angular4 app, the data is source depending on current logged user, so I have to wait the user data event to be fired to setup the data connection. (I use firebase to manage the user auth).

In the main component I have this:

  async ngOnInit() {
    this.afAuth.authState.subscribe(async data => {
      if (data && !data.isAnonymous) {    
        await this.userService.initSettingsAsync(data.uid);
      }
      else {
        this.nav.setRoot('LoginPage');
      }
    });
  }

My page is this:

@IonicPage({
  segment: 'customers/:customerId',
  defaultHistory: ['CustomersPage'],
})
@Component({
  selector: 'page-customer-detail',
  templateUrl: 'customer-detail.html',
})
export class CustomerDetailPage {
  customerId: string;
  customer: Customer;

  constructor(public navParams: NavParams, private customerService: CustomerService) {
    this.customerId = navParams.get("customerId");
  }

  async ionViewDidLoad() {
    console.log('ionViewDidLoad CustomerDetailPage');
    this.customer = await this.customerService.get(this.customerId);
  }
}

this.customerService.get(this.customerId) MUST execute AFTER this.userService.initSettingsAsync(data.uid) promise get resolved, otherwise userService doesn't know where to get the datas.

When the page is loaded by deeplink it get initialized BEFORE the authState event fire.

How can I handle this in a smart way? I mean, I don't like to put the user stuff on every page that needs data.

score 1 · Accepted Answer · edited Sep 27 '22 at 06:16

It was enough to add the ion-nav when the init is done. Super easy ;) Hope this help.

app.html:

<ion-nav *ngIf="initialized" [root]="rootPage" #content></ion-nav>

app.component.ts:

  async ngOnInit() {
    this.afAuth.authState.subscribe(async data => {
      if (data && !data.isAnonymous) {    
        await this.userService.initSettingsAsync(data.uid);
        this.initialized = true;
      }
      else {
        this.initialized = true;
        setTimeout(() => this.openPage('LoginPage'));
      }
    });
  }

Because 'nav' is added to the view after the initialization, there is a little trick needed (@ViewChild in *ngIf):

  private nav: Nav;
  @ViewChild(Nav) set contnav(nav: Nav) {
    this.nav = nav;
  }

Wait for an event before load a ionic3 deeplinked page

1 Answers1