Activity transition


#1

Hello,

I have two compoments.
The first is for the connexion and the second is for the inscription.
In the connexion component there is a button to go to the inscription component.
The code to go to the inscription component is :

	    this.routerExtensions.navigate(["/Inscription"], { 
	    	clearHistory: true,
	        transition: {
	            name: "slide"
	        }
        });

Could you tell me if that is the good way ?

After, for the inscription component, I would like to load the page and when the page is load, I would like to display a loading dialog to load datas from server.
It is my code :

    ngAfterViewInit():void {
        this.dialog.show(options); // that show the loading dialog
       this.recupVilles(); //the http function to load datas
    }

But the probleme is that when I click to the button inscription in the connexion component, I see at first the loading dialog and after the inscription component. And I think that load the data before display the component. But I want the reverse.
Maybe it is because “ngAfterViewInit” is not the good function ? But I don’t know what is the good function to write.
Could you tell me how to make that ?

Cordially


#2

Use navigatedTo event of page / layoutChanged event of the root view in the component which happens once the component is displayed.


#3

Ok
And for my others questions about the starting of the inscription and ngAfterViewInit ?
Cordially


#4

Ok Thank you
And for my others questions about the starting of the inscription and ngAfterViewInit ?
Cordially


#5

Could you ou help me please ?


#6

My answer was for both, use those events to make sure your transition is completed.


#7

Could you show me an example, because I searched but I don’t know how to resolve the problem ?


#8

layoutChanged event could be triggered multiple times when layout / bounds are updated. So I use my own directive to listen only once for the event.

import { Directive, OnDestroy, Input, Output, EventEmitter, ElementRef, Renderer2 } from "@angular/core";

import { EventData } from "data/observable";
import { View } from "ui/core/view";

@Directive({
    selector: "[listenOnce]",
})
export class ListenOnceDirective implements OnDestroy {

    @Input() eventName: string = View.layoutChangedEvent;
    @Output() listenOnce: EventEmitter<EventData> = new EventEmitter();

    listener: () => void;

    constructor(renderer: Renderer2,
        el: ElementRef) {
        this.listener = renderer.listen(el.nativeElement, this.eventName, (event: EventData) => {
            this.removeListener();
            this.listenOnce.emit(event);
        });
    }

    ngOnDestroy() {
        this.removeListener();
    }

    private removeListener() {
        if (this.listener) {
            this.listener();
            this.listener = null;
        }
    }
}

Once you have this directive imported, you can do something like this (on any element)

<StackLayout (listenOnce)="onInit()">

Now onInit function will be called when transition is completed.