Angular + Nativescript 代码共享项目移除操作栏

Question

我的项目正在使用 Angular + Nativescript 代码共享项目为 Android 和 IOS 的 web 以及移动构建。

问题是试图删除整个应用程序的操作栏。我已经阅读了一些关于这个问题的帖子，但是似乎没有一个解决方案有效，或者至少最终不是一个很好的解决方案。

我试图添加<Page actionBarHidden="true"></page>但是这app.component在包含路由的其他组件中或在其他组件中根本不起作用，例如 a home.componentwith the route home。如：

<Page actionBarHidden="true">
  <StackLayout orientation="vertical">
    <Image src="res://buy" stretch="none" horizontalAlignment="center"></Image>
  </StackLayout>
</Page>

我还尝试了一种专门针对 android 的方法，看看我是否可以通过AndroidManifest.xml文件解决这个问题，就像我通过更新 android 清单来删除操作栏来制作本机 Android 应用程序一样。对于健全性测试，我还尝试通过以下方式使用它styles.xml：

<style name="AppThemeNoActionBar" parent="AppTheme">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
</style>

在这些失败的尝试之后，我尝试了其他人推荐的以下代码，Page例如：

import { Page } from 'tns-core-modules/ui/page';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

  ngOnInit() {
    this.page.actionBarHidden = true;
  }
}

这种方法的问题是tns要使该解决方案起作用，我需要为每个具有路由的组件创建一个文件，只是为了调用它来完全删除应用栏，因为每个页面似乎都在处理自己的应用栏。现在这在大规模上并不是真正可维护的，它迫使我tns为所有具有路由的组件创建一个文件。

最后，我看到我们在那里有具有此逻辑是服务的一个例子this.page.actionBarHidden，以及rootFrame.actionBarVisibility = 'never'，你会调用中component.ts的文件，而不需要创建一个component.tns.ts文件，但这个问题现在你需要创建一个具有常规服务要调用的空函数tns，为实际逻辑创建该服务的文件，并且必须在每个具有路由的组件中调用它。

正如您所看到的，一些解决方案根本不起作用，而其他解决方案需要大量额外的代码和可维护性，尤其是随着应用程序的增长，它们并不是非常理想的解决方案。

我将继续研究这个问题，并且我相信必须有一个干净的解决方案。

Answer 1

你可以简单地设置actionBarVisibility为never你page-router-outlet自己。

<page-router-outlet actionBarVisibility="never"></page-router-outlet>