如何使用 angular2 和打字稿隐藏安卓操作栏

How to hide the android actionbar with angular2 and typescript?

本文关键字：隐藏 操作 何使用 angular2      更新时间：2023-09-26

我有一个简单的html文件： 

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

但是当我使用： 

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

它打破了页面..操作栏没有隐藏，内容和操作栏之间存在巨大的差距。

我为我的应用程序使用 angular2 和打字稿。

我的错误是什么？

任何帮助非常感谢！

您可以在组件 JS 中定位页面属性，如下所示：

export class HomePage implements OnInit {
    page: Page;
    ngOnInit() {
        this.page = <Page>topmost().currentPage;
        this.page.actionBarHidden = true;
    }
}

您需要导入import {topmost} from "ui/frame";并import {Page} from "ui/page";.

这样你就不需要标签（这些标签隐含在 Angular 2 组件中）。

我希望这有所帮助！

另外，只是为了跟进 Brad 关于自闭合标签的评论 - 你会发现使用 Angular 的显式结束标签（就像你正在做的那样）效果更好。

有一个更简单的解决方案。在 Angular 4.1.0 和 NativeScript 3.0.0 上进行测试 

import { Page } from "ui/page";
export class AppComponent {
    constructor(private page: Page) {
        page.actionBarHidden = true;
    }
}

您可以从组件的构造函数控制ActionBar的可见性。

堆栈溢出答案：https://stackoverflow.com/a/39962992/2765346

该属性actionBarHidden仅适用于<Page>组件。不要以为你可以把它应用到<StackLayout>.您也不必在默认情况下<StackLayout>垂直的上指定orientation="vertical"。除非您尝试实现此处未提及的特定用例:)

https://docs.nativescript.org/ApiReference/ui/page/Page.html

只是另一个提示 - 您可以自行关闭<Image />不需要</Image>标签。

试试这个....

import { Page } from "tns-core-modules/ui/page";
export class YourComponent implements OnInit {
   public constructor(private router: RouterExtensions, private page: Page) {
   
   }
   public ngOnInit() {
     this.page.actionBarHidden = true;
   }
}
相关文章：