如何得到高度和宽度的设备显示在角2使用打字机？

我找到了这个解决方案，有效吗？

import {Component} from '@angular/core';
import {Platform} from 'ionic-angular';


@Component({...})
export MyApp {
constructor(platform: Platform) {
platform.ready().then((readySource) => {
console.log('Width: ' + platform.width());
console.log('Height: ' + platform.height());
});
}
}

这是离子2的溶液。 我也可以用角2吗？

请告诉我做这件事的正确方法。

150184 次浏览
小开
最佳答案

我找到了解决方案。答案很简单。在你的构造函数中写下下面的代码。

import { Component, OnInit, OnDestroy, Input } from "@angular/core";
// Import this, and write at the top of your .ts file
import { HostListener } from "@angular/core";


@Component({
selector: "app-login",
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})


export class LoginComponent implements OnInit, OnDestroy {
// Declare height and width variables
scrHeight:any;
scrWidth:any;


@HostListener('window:resize', ['$event'])
getScreenSize(event?) {
this.scrHeight = window.innerHeight;
this.scrWidth = window.innerWidth;
console.log(this.scrHeight, this.scrWidth);
}


// Constructor
constructor() {
this.getScreenSize();
}




}

= = = = = = = 工作代码(另一个) = = = = = = = 

export class Dashboard  {
mobHeight: any;
mobWidth: any;
constructor(private router:Router, private http: Http){
this.mobHeight = (window.screen.height) + "px";
this.mobWidth = (window.screen.width) + "px";
console.log(this.mobHeight);
console.log(this.mobWidth)
}
}
小开 
export class Dashboard {
innerHeight: any;
innerWidth: any;
constructor() {
this.innerHeight = (window.screen.height) + "px";
this.innerWidth = (window.screen.width) + "px";
}
}
小开

记住，如果你想测试这个组件，你需要注入窗口。使用@Inject ()函数注入窗口对象，方法是使用字符串标记命名它，如本 复制品所示

小开

对于那些想要得到高度和宽度的设备，即使显示器是 调整尺寸(动态的和实时的) :

  • 第一步:

在该组件中做: import { HostListener } from "@angular/core";

  • 第二步:

在组件的类主体中写:

@HostListener('window:resize', ['$event'])
onResize(event?) {
this.screenHeight = window.innerHeight;
this.screenWidth = window.innerWidth;
}
  • 第三步:

在组件的 constructor中，调用 onResize方法来调用 初始化变量。同时，不要忘记首先声明它们。

constructor() {
this.onResize();
}

完整代码: 

import { Component, OnInit } from "@angular/core";
import { HostListener } from "@angular/core";


@Component({
selector: "app-login",
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})


export class FooComponent implements OnInit {
screenHeight: number;
screenWidth: number;


constructor() {
this.getScreenSize();
}


@HostListener('window:resize', ['$event'])
getScreenSize(event?) {
this.screenHeight = window.innerHeight;
this.screenWidth = window.innerWidth;
console.log(this.screenHeight, this.screenWidth);
}


}
小开

您可以为这个场景使用 typecript getter 方法

public get height() {
return window.innerHeight;
}


public get width() {
return window.innerWidth;
}

在模板中使用如下:

<section [ngClass]="{ 'desktop-view': width >= 768, 'mobile-view': width < 768
}"></section>

打印值

console.log(this.height, this.width);

您不需要任何事件处理程序来检查窗口的大小调整，此方法将每次自动检查大小。

小开

我读到建议在构造函数中注入 DOCUMENT，这样它就可以同时在浏览器和服务器端的渲染平台上工作。对 window的全局 DOM 引用仅适用于浏览器呈现平台。要访问寡妇对象，可以使用 DOCUMENT:

@Inject(DOCUMENT) private _document: Document

console.log('window height ', this._document.defaultview.innerHeight);
console.log('window height ', this._document.defaultview.innerWidth);

提交答案