feat: introduce PageService

[edusperoni]

PR Checklist

• The PR title follows our guidelines: https://github.com/NativeScript/NativeScript/blob/master/CONTRIBUTING.md#commit-messages.
• There is an issue for the bug/feature this PR is for. To avoid wasting your time, it's best to open a suggestion issue first and wait for approval before working on it.
• You have signed the CLA.
• All existing tests are passing: https://github.com/NativeScript/nativescript-angular/blob/master/DevelopmentWorkflow.md#running-the-tests
• Tests for the changes are included.

What is the current behavior?

To detect navigation we have to manually inject page, listen to events and handle the subscriptions.

What is the new behavior?

Introduces a PageService that has:

• page: reference to the current page
• inPage: boolean: Page is the currently displayed page
• inPage$: Observable<boolean>: will emit true/false when entering/leaving page
• pageEvents$: Observable<NavigatedData>: observable of page events (use with filter operator)

example implementation:

export class DemoComponent {
    subscribed = false;
    constructor(pageService: PageService) {}

    ngOnInit() {
        this.subscribeToEvents();
        this.pageService.inPage$.subscribe(
            (inPage) => inPage ? this.subscribeToEvents() : this.clearSubscriptions();
        )
    }
    ngOnDestroy() {
        this.clearSubscriptions();
    }

    subscribeToEvents() {
        if (this.subscribed) return;
        this.subscribed = true;
    }

    clearSubscriptions() {
        if (!this.subscribed) return;
        this.subscribed = false;
    }
}

The "RxJs way":

myObservable$ = this.pageService.inPage$.pipe(
    // not in page? unsubscribe to realSource$ and subscribe to NEVER
    switchMap((inPage) => inPage ? realSource$.pipe(materialize()) : NEVER),
    dematerialize()
    // materialize/dematerialize if you care about realSource$ completion from https://codeburst.io/heres-how-i-built-my-very-own-pausable-rxjs-operator-24550123e7a6
);

ngOnInit() {
   this.sub = this.myObservable$.subscribe(...);
}

ngOnDestroy() {
    this.sub.unsubscribe();
}

Provides an "angular way" of managing #374

[vakrilov]

test

[vakrilov]

Awesome work @edusperoni !
Nice improvements in the page-router-outlet code as well.

Only small change request - can you change Destruct<a>ble to Destruct<i>ble

[edusperoni]

Oops! Fixed it now!

[vakrilov]

Triggering internal CI

[vakrilov]

test

[jessorlisa]

@edusperoni Is this still part of the latest @nativescript/angular@10.1.7? It appears to be gone or I am blind 😕 .

[edusperoni]

It seems it was removed in some cleanup. For the moment you can copy the code and put the class in the providers for your component, it should work without an issue.

[jessorlisa]

@edusperoni Thanks for checking!