[英]How to use nativescript-orientation plugin in typescript & Angular 2 in nativescript?
I'm going to use nativescript-orientation plugin in my project. 我将在项目中使用nativescript-orientation插件。 https://github.com/NathanaelA/nativescript-orientation#argslandscape--true--false
https://github.com/NathanaelA/nativescript-orientation#argslandscape--true--false
I want to change all layout when orientation changes automatically. 我想在方向自动更改时更改所有布局。 So I'm going to use this function.
因此,我将使用此功能。
exports.orientation(args)
args.landscape = true | false
args.page (depreciated) or args.object = the current page
But I don't know how to insert it in my typescript & angluar 2 project. 但是我不知道如何在我的打字稿和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){
}
You just need to add the CSS rules for your landscape/portrait modes and you are good to go. 您只需要为您的风景/人像模式添加CSS规则就可以了。
rg app.css RG app.css
.btn {
font-size: 18;
}
.landscape Button {
background-color: red;
color: white;
}
.landscape StackLayout {
background-color: gray;
}
app.component.ts 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 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>
Full working demo here (once the app loads manually rotate the screen) 完整的演示在这里 (一旦应用加载手动旋转屏幕)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.