nativescriptのオリエンテーション2とnativescriptのOriental Pluginの使い方

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