web-dev-qa-db-fra.com

Comment obtenir la hauteur et la largeur d'affichage de l'appareil dans angular2 en utilisant dactylographie?

J'ai trouvé cette solution. Est-ce valide?

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());
  });
 }
}

Cette solution est pour ionic 2. puis-je aussi utiliser pour angular 2?

S'il vous plaît, suggérez-moi la bonne façon de le faire.

angulartypescript
39
Harish Mahajan

J'ai trouvé la solution. La réponse est très simple. écrivez le code ci-dessous dans votre constructeur.

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();
    }


}

====== Code de travail (autre====) ==

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)
     }
}
42
Harish Mahajan

Pour ceux qui veulent obtenir la hauteur et la largeur de l'appareil même lorsque l'affichage est redimensionné (dynamiquement et en temps réel):

  • Étape 1:

Dans ce composant, faites: import { HostListener } from "@angular/core";

  • Étape 2:

Dans le corps de classe du composant, écrivez:

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

Dans le composant constructor du composant, appelez la méthode onResize pour initialiser les variables. De plus, n'oubliez pas de les déclarer en premier.

constructor() {
  this.onResize();
}

Code complet:

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:any;
    screenWidth:any;

    constructor() {
        this.getScreenSize();
    }

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

}
79
BlackBeard
export class Dashboard {
    innerHeight: any;
    innerWidth: any;
    constructor(private router: Router, private http: Http) {
        this.innerHeight = (window.screen.height) + "px";
        this.innerWidth = (window.screen.width) + "px";
    }
}
27
Bhavan Patel

N'oubliez pas que si vous souhaitez tester ce composant, vous souhaitez injecter la fenêtre. Utilisez la fonction @Inject () pour injecter l’objet window en le nommant à l’aide d’un jeton de chaîne, comme indiqué en détail dans ce duplicate

7
Strake