Question

我将在我的项目中使用nativescript-orientation插件。 https://github.com/NathanaelA/nativescript-orientation#argslandscape--true--false

我希望在方向自动更改时更改所有布局。所以我将使用此功能。

exports.orientation(args)
args.landscape = true | false
args.page (depreciated) or args.object = the current page

但我不知道如何将其插入我的打字稿中。 angluar 2项目。

    import { Component, OnInit } from "@angular/core";
    var Orientation = require( "nativescript-orientation" );
    @Component({
        selector: "my-app",
        templateUrl: "app.component.html",
    })
     export class AppComponent implements OnInit {
        public counter: number = 16;
         public get message(): string {
            if (this.counter > 0) {
                return this.counter + " taps left";
            } else {
                return "Hoorraaay! \nYou are ready to start building!";
            }
        }
        ngOnInit(){
            console.log(Orientation.getOrientation()+"--phone"); 
        }
        public onTap() {
            this.counter--;
        }
   }

export function orientation(args){
}

Answer 1

您只需要为横向/纵向模式添加CSS规则，就可以了。

R.G。的 app.css

.btn { font-size: 18; } .landscape Button { background-color: red; color: white; } .landscape StackLayout { background-color: gray; }

<强> app.component.ts

import { Component} from "@angular/core"; var orientation = require('nativescript-orientation'); @Component({ selector: "my-app", templateUrl: "app.component.html", }) export class AppComponent { public onTap() { console.log(orientation.getOrientation()); } }

<强> app.component.html

<StackLayout class="p-20"> <Label text="Tap the button" class="h1 text-center"></Label> <Button text="TAP" (tap)="onTap()" class="btn btn-primary btn-active"></Button> <Button text="Sample Button"></Button> </StackLayout>

完整的工作演示here（一旦应用加载手动旋转屏幕）

如何在打字稿和＆amp ;;中使用nativescript-orientation插件Nativescript中的Angular 2？

1 个答案: