Question

我开始使用NativeScript + Angular 2，我想实现一个根据设备方向激活不同路由的组件。经过大量搜索后，我能够正常工作，但我还没有弄清楚如何获得初始设备方向，这听起来应该更容易。

这是我的AppComponent代码。看看ngAfterViewInit：

import {Component, OnInit, OnDestroy, AfterViewInit} from "@angular/core";
import {Router} from "@angular/router";

import _application = require('application');

@Component({
    selector: "my-app",
    templateUrl: "app.component.html",
})
export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
    constructor(private router: Router) {}

    ngOnInit() {
        _application.on(_application.orientationChangedEvent, this.setOrientation.bind(this));
    }

    ngAfterViewInit() {
        // How do I get the initial orientation here instead of hardcoding to 'portrait'?
        this.setOrientation({newValue: 'portrait'})
    }

    ngOnDestroy() {
        _application.off(_application.orientationChangedEvent, this.setOrientation);
    }

    setOrientation(args) {
        if (args.newValue === 'landscape') {
            this.router.navigate(['/landscape']);
        } else {
            this.router.navigate(['/portrait']);
        }
    }
}

Answer 1

private activity:any = application.android.foregroundActivity;
this.activity.getResources().getConfiguration().orientation;

Answer 2

您可以使用this plugin。为了获得最新版本的访问权限，您需要每月向维护ProPlugins的开发人员支付费用。

您可以使用以下方法安装它的最后一个免费版本：

npm i nativescript-orientation

这没有任何保证，特别是在{N} 6+中。

安装后，您可以像这样获得当前屏幕方向：

const orientation = require("nativescript-orientation");
console.log(orientation.getOrientation());

Answer 3

虽然我无法确定我所知道的初始方向，但是仍然可以获取当前屏幕尺寸。您可以从核心库中导入屏幕模块。

import { screen } from 'tns-core-modules/platform';

然后在应用程序初始化时，通过确定屏幕高度是否大于宽度来确定方向：

this.orientation = screen.mainScreen.heightPixels > screen.mainScreen.widthPixels ? 'portrait' : 'landscape';

编辑：这可能是不一致的，并且没有经过充分测试（这意味着屏幕高度可能不总是纵向模式下的屏幕高度）。如果是这种情况，那么在页面加载时，您可以使用相同的策略来测量主Page元素，并比较视图的高度和宽度以确定方向。

如何使用Angular 2在NativeScript中获取初始设备方向

3 个答案: