Nativescript-angular: Router with {N} parameters as clearHistory, backstackVisible

[leocaseiro]

Hi, I'm trying to remove my back button after my login.

A good example is the sample-groceries in Angular.

After login, you can still see the back button, but I don't want that.

I am very well-known how to implement that using JS with frameModule.topmost. It's simple to add parameters such as clearHistory or backstackVisible.

Is there any way to pass these parameters with Angular?

I've tried also create a new <router-outlet> instead of <page-router-outlet> following the Docs about {N} Angular Navigation.

So I have a login and a index for my router-outlet, however, the index should have some child routers. I'm having lot's of issues trying this solution. Actually my index doesn't replace the full page which is what I want.

Anybody with some ideas for that?

I'm happy to post some examples here...but perhaps it's a simple parameter that I couldn't find.

Also it might be related with #2170

Many thanks

[vakrilov]

Currently, there is no support for clearing the history when navigation with the <page-router-outlet>. We care currently in a process of moving away form the router-depricated and adding support for the new router ( a.k.a @angular/router) and we will want to support for clearHistory and backstackVisible options.

Your alternative approach - using only <router-outlet> will solve the problem with the back button and seems like a viable solution. If you share some of the code - maybe we can make it work.

[ChrisMoffatt]

We (@leocaseiro) ended up getting around this by changing our constructor for the main page (after logging in) to:

import {Component} from "@angular/core";
import {Page} from "ui/page";

@Component({
    selector: 'home',
    templateUrl: 'Home.html'
})
export class Home {

    constructor(private _page: Page) {
        this._page.actionBarHidden = true;
    }
}

This seems to work quite well so far..

[vakrilov]

Great to hear you found a solution.
I'm closing this issue for now - reopen if needed.
The main issue about the new router integration is #218

[vakrilov]

Reopening this issue to track implementation of clearHistory and backstackVisible with @angular/router

[LTMenezes]

The solution from @ChrisMoffatt only removes the action bar but it does not stop the user from being able to go back to the early page (swiping left on IOS). We need to be able to remove completely the backstack just like the nativescript version.

[leocaseiro]

Hi @vakrilov, I'm using the new router now, and I'd like to implement clearHistory.
Has it done with new Router or not yet? Thanks.

[vakrilov]

There are some new examples:

• clear-history-example
• login-example

Documentation update is in progress too.

[leocaseiro]

Awesome work! I really appreciate @vakrilov.

Should it work on the version [email protected]?

[vakrilov]

Yes

[40x]

@vakrilov Any update on backstackVisible ? Has this been implemented with the angular router or the nativescript extension of the router?

[vakrilov]

@NgSculptor Currently we are not working on supporting that. What's you scenario? Can it be achieved with modal dialogs or router guards?

[40x]

Im not sure yet, here is my scenario:

user taps on a record from a list of records and goes into record details, there the user has the option of adding an item to this record by clicking on a + icon, one thing to note is that none of this states are child/nested states (i.e they are all at the same level). So when the user fills out the form and hits save the item is persisted in the DB and the goal is to move the user back to the record details view.

Now one would expect that if the user hits back on the record details view, they will be taken to the list of records but instead took the user back to the adding an item view (which was caching the previous data).

I tried the router and the routerextensions to navigate back but got the same error. Finally was able to work around this by doing topMost().goBack(). Not sure if this is a real fix or not, but it seems to be working for now.

[lukashlobil]

I am currently looking for something similair

[sam0829]

@vakrilov Any update on backstackvisible? I have a scenario.
In my app, user is assigned a task to draw an Apple & Ball. so for this I have total 3 screens.
1) Screen #1 : Instruction to user that first Draw an apple. Upon pressing Next proceed to screen #2,
2) User can draw apple here & once done, he presses "OK" button. on tap of ok, I navigate user to previous screen (i.e screen #1) with navigation.back();
3) User will now see instructions to draw a Ball & upon clicking "Next", he will be navigated to screen #2
4) User can draw Ball here, & now when he press "OK", instead of taking user back to screen #1, I am redirecting user to screen #3 where user can preview his drawings.

Now the problem is, ideally when user hits back button from Preview screen, he should be taken back to
screen #1 with Instructions to Draw an Apple. but currently screen #2 is coming as it's in backstack.

So there must be an option like when user is going to draw his last assignment & navigating to screen #2, I should be able to pass the backstackvisible = false so even if user presses back from Screen #3, he gets redirected to screen #1

[vakrilov]

Thanks for the description @sam0829. It seems like a reasonable case.
As for now the backstackVisible is still not implemented. You can try using a custom modal-dialog for your screen #2.

[sam0829]

@vakrilov Thanks for your suggestion, but as per my understanding, custom modal-dialog will open my screen as a dialog & that is not solution for me :( I'll need full screen (Activity) for my screen #2.

[vakrilov]

@sam0829 You can pass fullscreen: true in the ModalDialogOptions to make the modal fullscreen.

[sam0829]

@vakrilov It seems to do the work :) I was able to use custom modal-dialog for my screen #2 and I couldn't find any visible difference at first glance. If there's anything I notice, I'll update you :)

[Ross-Jo]

Is there any recent news on backstackVisible(of course in angular+{N})?