Wie wird das nativescript-orientation-Plugin in Typoskript & Angular 2 in nativescript verwendet?

Question

Ich werde nativescript-orientation-Plugin in meinem Projekt verwenden. https://github.com/NathanaelA/nativescript-orientation#argslandscape--true--false

Ich möchte alle Layout ändern, wenn die Ausrichtung automatisch ändert. Also werde ich diese Funktion verwenden.

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

Aber ich weiß nicht, wie es zum Einfügen in meinem Typoskript & angluar 2-Projekt.

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

Sie müssen nur die CSS-Regeln für Ihre Landscape/Portrait-Modi hinzufügen, und Sie sind gut zu gehen.

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> 

Voll funktions Demo here (sobald die App Lasten manuell drehen Sie den Bildschirm)