如何使用Angular2和TypeScript隐藏Android ActionBar？

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。

我犯了什么错误？

非常感谢任何帮助！

- olivier

Answer 1

您可以在组件的 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 中，显式地关闭标签（如你所做的）效果更好。

- George Edwards

---

谢谢，但现在我遇到了一个错误：“HomePage（我的类）”上不存在属性页面。 - olivier

谢谢，你能解释一下页面：Page是什么吗？其次，我遇到了“找不到topmost”的错误，但我会尝试使用其他东西而不是topmost。 :) - olivier

@olivier 啊，抱歉 - 你需要在组件顶部添加 import {Page} from "ui/page"; 和 import {topmost} from "ui/frame";。 - George Edwards

Answer 2

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

import { Page } from "ui/page";

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

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

StackOverflow答案：https://dev59.com/aVwX5IYBdhLWcg3wyCDT#39962992

- Hristo Eftimov

---

是的，这个方法可行，但我不明白为什么我们需要导入另一个组件来隐藏某些东西... - Csaba

Answer 3

属性actionBarHidden仅适用于<Page>组件。不要尝试将其应用于<StackLayout>。您也不必在<StackLayout>上指定orientation="vertical"，因为它默认为垂直方向。除非您有特定的使用情况需要实现，本文未提及 :)

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

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

- Brad Martin

---

谢谢！你能告诉我在哪里可以隐藏操作栏吗？ - olivier

您已经在一个片段中的<Page>组件上拥有它。那是唯一一个该属性有效的地方，它在我的第一条评论中的文档页面上。因此，您不能在<StackLayout>上使用它。 - Brad Martin

好的，谢谢，但我是从这里复制的：https://github.com/NativeScript/NativeScript/blob/master/apps/action-bar-demo/pages/action-bar-hidden.xml - olivier

你所拥有的不是完全相同的副本，但这是隐藏ActionBar的正确方法。如果需要进一步澄清，请告诉我。 - Brad Martin

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

}

- Vince Phan