¿Existe un servicio Angular 2 que sea similar a $ mdMedia? Necesito mostrar u ocultar un botón según el tamaño de la ventana (si la ventana es del mismo tamaño que la pantalla, quiero ocultarla)

0
Elaina 15 dic. 2016 a las 00:18

2 respuestas

La mejor respuesta

Quizás esto pueda ayudarte.

resize.service.js

import {Injectable} from '@angular/core';
import {BehaviorSubject} from 'rxjs/BehaviorSubject';

@Injectable()
export class ResizeService {
    public window = new BehaviorSubject(null);

    constructor() {
        window.onresize = (e) => {
            this.window.next(e.target);
        };
    }
}

app.component.ts

import {Component} from '@angular/core';
import {ResizeService} from './resize/resize.service';

@Component({
    moduleId: module.id,
    selector: 'my-app',
    templateUrl: 'app.component.html',
    providers: [ResizeService]
})

export class AppComponent {
    constructor(private resizeService: ResizeService) {
        resizeService.window.subscribe((val) => {
            if (val) {
                console.log(val.innerWidth);
            }
        });

    };
}

El servicio utiliza BehaviourSubject. Consulte esta respuesta para obtener una descripción de lo que es. Consulte también https://xgrommx.github.io/rx- libro / contenido / materias / tema_comportamiento / index.html

El componente se suscribe al BehaviorSubject (ventana) y obtiene los valores actualizados cuando cambia el tamaño de la pantalla.

1
Community 23 may. 2017 a las 11:54

Puede usar y debe usar flex-layout:

https://github.com/ oficial angular / flex-layout / wiki / Adaptive-Layouts # core-directives - responsive-features

import {ObservableMedia} from '@angular/flex-layout';

@Component({
  selector : 'my-mobile-component',
  template : `
      <div *ngIf="media.isActive('xs')">
         This content is only shown on Mobile devices
      </div>
      <footer>
         Current state: {{ }}
      </footer>
  `
})
export class MyMobileComponent {
  public state = '';
  constructor(public media:ObservableMedia ) {
    media.asObservable()
      .subscribe((change:MediaChange) => {
        this.state = change ? `'${change.mqAlias}' = (${change.mediaQuery})` : ""
      });
  }
}
1
hehe 1 may. 2017 a las 09:00