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

您可以在组件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 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://stackoverflow.com/a/39962992/2765346

Answer 3

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

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

只是另一个提示 - 您可以自行关闭<Image />，无需</Image>标记。

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和typescript隐藏android动作栏？

4 个答案: