如何使用 angular2 和打字稿隐藏 android 操作栏？

Question

我有一个简单的 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 和 typescript。

我的错误是什么？

非常感谢任何帮助！

Answer 1

属性 actionBarHidden 仅适用于 <Page> 组件。不要以为你可以将它应用到 <StackLayout>。您也不必在默认情况下为垂直的 <StackLayout> 上指定 orientation="vertical"。除非这里没有提到您要实现的特定用例:)

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

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

Answer 2

您可以在组件 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，显式闭合标签（正如您所做的那样）效果更好。

Answer 3

有一个更简单的解决方案。在 Angular 4.1.0 和 NativeScript 3.0.0

上测试

import { Page } from "ui/page";

export class AppComponent {
    constructor(private page: Page) {
        page.actionBarHidden = true;
    }
}

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

Whosebug 回答：

Answer 4

试试这个....

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;
   }

}

如何使用 angular2 和打字稿隐藏 android 操作栏？

How to hide the android actionbar with angular2 and typescript?

javascript

android

typescript

nativescript