<router-outlet> 工作正常但会导致问题 <page-router-outlet>

Question

我正在创建 NativeScript - Angular 应用程序。我的应用程序内部路由有问题，后退按钮不起作用（智能手机中的后退按钮，它应该返回上一页，但它正在关闭我的应用程序）。

我在我的 app.component.html 文件中使用，所以我将其更改为后退按钮开始按预期工作，但我的主页布局完全被破坏 - 所有对象都重叠在它们自己和 "Preview" ActionBar出现在.

之一

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

我应该怎么做才能使我的应用程序与

的应用程序版本相同

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

Answer 1

在 page-router-outlet 上将 actionBarVisibility 设置为 never 以隐藏操作栏。

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

将它们包裹起来

<router-outlet> 工作正常但会导致问题 <page-router-outlet>

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

nativescript

nativescript-angular