Angular 2服务 - $ mdMedia

Question

是否有类似于$ mdMedia的Angular 2服务？我需要显示或隐藏基于窗口大小的按钮（如果窗口与屏幕大小相同，我想隐藏它）

Answer 1

也许这可能对您有帮助。

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

    }; 
} 

该服务使用BehaviourSubject。 See this answer了解它是什么。另请参阅https://xgrommx.github.io/rx-book/content/subjects/behavior_subject/index.html

组件订阅BehaviourSubject（窗口）并在屏幕大小更改时获取更新的值。

Answer 2

您可以使用并应使用柔性布局：

官方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})` : "" 
     }); 
    } 
}