Nativescript <；路由器出口>；工作正常但会导致问题<；页面路由器出口>；

我正在创建NativeScript-Angular应用程序。我在我的应用程序中遇到了一个路由问题，没有使用后退按钮（我的智能手机中的后退按钮，应该返回到上一页，但它正在关闭我的应用程序）

我在我的app.component.html文件中使用了，所以我将其改为，后退按钮开始像它应该的那样工作，但我主页的布局完全被破坏了——所有对象都在它们自身上重叠，“预览”操作栏出现在其中一个页面中

<!-- 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>

GridLayout.page{
背景：线性梯度（-85度，#08BD73，#02A373）；
弯曲方向：立柱；
}
GridLayout.bialy{
背景：白色；
弯曲方向：立柱；
边界半径：40 0；
证明内容：中心；
}

我该怎么做才能使我的应用程序与应用程序版本相同

这是具有的版本的外观（屏幕1）：

---

这就是版本的外观（我希望我的应用程序看起来像这样）（屏幕2）

在

页面路由器出口

上将

actionBarVisibility

设置为

永不

，以隐藏操作栏

---

您的主组件似乎没有任何布局，这可能是您只看到最后一个按钮的原因，请使用

StackLayout

后退按钮关闭应用程序？听起来更像是撞车。你能展示一些截图吗？你期待什么，你看到什么？我已经编辑了我的帖子并添加了截图。我猜它并没有崩溃，当我点击后退按钮时，应用程序正在接近手机主屏幕，并且在后台打开。