2016-12-14 3 views
0

$ mdMedia와 비슷한 Angular 2 서비스가 있습니까? 창 크기에 따라 단추를 표시하거나 숨길 수 있어야합니다 (창과 화면 크기가 같으면 숨기려고합니다.)

답변

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 (창)에 가입하고 화면 크기가 변경 될 때 업데이트 된 값을 가져옵니다.

1
사용할 수있는 플렉스 레이아웃 사용해야합니다

:

공식을 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})` : "" 
     }); 
    } 
}