Angular 2-Dienste - $ mdMedia

Question

Gibt es einen Angular 2-Dienst, der $ mdMedia ähnelt? Ich muss eine Schaltfläche basierend auf der Größe des Fensters anzeigen oder ausblenden (wenn das Fenster die gleiche Größe wie der Bildschirm hat, möchte ich es ausblenden)

Answer 1

Vielleicht könnte dies Ihnen helfen.

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

    }; 
} 

Der Dienst verwendet BehaviourSubject. See this answer für eine Beschreibung dessen, was es ist. Siehe auch https://xgrommx.github.io/rx-book/content/subjects/behavior_subject/index.html

Die Komponente abonniert das BehaviourSubject (Fenster) und erhält die aktualisierten Werte, wenn sich die Bildschirmgröße ändert.

Answer 2

Sie verwenden können und sollten verwenden Flex-Layout:

offiziellen https://github.com/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})` : "" 
     }); 
    } 
}