如何在nativescript中使用nativescript-orientation插件和Angular 2？

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

但我不知道如何将它插入到我的 typescript & 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（一旦应用加载手动旋转屏幕）