3

Estoy haciendo una clase, que, debería retornarme si la pantalla del usuario se redimensiona.

responsive.ts

import { ChangeDetectorRef, OnDestroy } from '@angular/core';
import { MediaMatcher } from '@angular/cdk/layout';

export default class ResponsiveDevice implements OnDestroy {

    private query: MediaQueryList;
    private listener: () => void;

    constructor( media?: MediaMatcher, change?: ChangeDetectorRef ) {
        this.query = media.matchMedia(' (max-width:600px) ');
        this.listener = () => change.detectChanges();
        this.query.addEventListener( 'change', this.listener );
    }

    ngOnDestroy(): void {
        this.query.removeEventListener( 'change', this.listener );
    }

    isMobile(): boolean {
        return this.query.matches;
    }
}

Así la puedo invocar desde cualquier pantalla que necesite saber el tamaño de la pantalla y decidir funcionalidades.

cover.component.ts

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import ResponsiveDevice from '../../global/functions/responsive';

@Component({
  selector: 'app-cover',
  templateUrl: './cover.component.html',
  styleUrls: ['./cover.component.scss']
})
export class CoverComponent implements OnInit {

  isMobile: boolean;
  form: FormGroup;
  options: string[] = ['Ciudad de México', 'Puebla', 'Baja California'];

  constructor() { }

  ngOnInit(): void {
    this.form = new FormGroup({
      search: new FormControl( null, [Validators.required, Validators.minLength(4)] )
    });
    const responsive = new ResponsiveDevice();
    this.isMobile    = responsive.isMobile();
  }

}

Pero cuando inicializa la pantalla me salta este error.

core.js:6228 ERROR TypeError: Cannot read property 'matchMedia' of undefined
    at new ResponsiveDevice (responsive.ts:10)
    at CoverComponent.ngOnInit (cover.component.ts:21)
    at callHook (core.js:4726)
    at callHooks (core.js:4690)
    at executeInitAndCheckHooks (core.js:4630)
    at refreshView (core.js:12013)
    at refreshComponent (core.js:13445)
    at refreshChildComponents (core.js:11716)
    at refreshView (core.js:12051)
    at renderComponentOrTemplate (core.js:12129)

Evidentemente media no está definido, pero no debería mandar error, pues es el constructor el que la declara y la usa.

Me base en este ejemplo para intentar refactorizar la función. Utilizo Angular 9.

6
  • ¿Por qué injectas el MediaMatcher de forma opcional?
    – VRoxa
    el 9 jun. 2020 a las 1:11
  • Por que si lo dejo requerido al instanciar del otro lado me la pide, y la intención es que todo se haga ahí. el 9 jun. 2020 a las 1:36
  • Si no creas la instancia pasándole ningún parámetro, obviamente media va a ser undefined siempre. Sería mejor que registrarlas el ResponsiveDevice como servicio, con MediaMatcher y ChangeDetectorRef como sus dependencias e inyectaras este servicio en los componentes que lo requieran, sin tener que preocuparse de instanciar el servicio.
    – VRoxa
    el 9 jun. 2020 a las 1:39
  • existe el evento onresize, haz intentado usarlo?
    – Layer
    el 9 jun. 2020 a las 2:39
  • Si @Riven, pero siguiendo las buenas prácticas de Angular, procuro no tocar directamente el DOM. el 9 jun. 2020 a las 2:59

1 respuesta 1

0

Haz intentado con

import { BreakpointObserver } from '@angular/cdk/layout';

const oritentation = this.breakObsrv.observe([
      '(max-width: 599px)',
      '(orientation: portrait)',
      '(orientation: landscape)',
    ]);
    oritentation.subscribe(lay => {
      this.Landscape = lay.breakpoints[('(orientation: landscape)')];
    });

Mas info Aqui

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.