Search code examples
nativescriptnativescript-angular

<router-outlet> works fine but causes problems <page-router-outlet>

screen 1 screen 2

I am creating NativeScript - Angular app. I had a problem with routing inside my app with not working back button (back button in my smartphone, it is supposed to go back to previous page but it is turning off my app).

I was using in my app.component.html file so I changed it to and back buttons started to works like it supposed to but layout of my home page is completly destroyed - all objects in in overlap on themselfs and "Preview" ActionBar appears in one of .

<!-- app.component.html -->

<GridLayout class="page">
    <ScrollView>
    <GridLayout rows="80 *" columns="*">
        <FlexboxLayout class="menu">      
<Image class="menu" src="~/app/images/burger.png" width="10%"></Image>
          </FlexboxLayout>
          <ScrollView></ScrollView>
            <GridLayout class="bialy" row="1" rows="*" columns="*">
              <FlexboxLayout>
                  <GridLayout class="space"></GridLayout>
                  <page-router-outlet></page-router-outlet>
                </FlexboxLayout>
            </GridLayout>
          </GridLayout> 
        </ScrollView>
</GridLayout>

<!-- app.css -->

GridLayout.page {
    background: linear-gradient(-85deg, #08BD73, #02A373);
    flex-direction: column;
}
GridLayout.bialy {
    background: white;
    flex-direction: column;
    border-radius: 40 40 0 0;
    justify-content: center;
}

<!-- home.component.html -->
<Button text="Add" [nsRouterLink]="['/new']"></Button>
<Button text="Watering" [nsRouterLink]="['/watering']"></Button>
<Button text="catalog" [nsRouterLink]="['/catalog']" ></Button>

What shall I do to make my app with the same as app version with

This is how version with looks like (screen 1): And this is how version with looks like (and I want my app to look like this) (screen 2)

Solution

  • Set actionBarVisibility to never on page-router-outlet to hide the action bar.

    Your home component doesn't seem to have any layout which may be the reason you are seeing only the last button, wrap them with a StackLayout.