$ mdMedia와 비슷한 Angular 2 서비스가 있습니까? 창 크기에 따라 단추를 표시하거나 숨길 수 있어야합니다 (창과 화면 크기가 같으면 숨기려고합니다.)
0
A
답변
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})` : ""
});
}
}
관련 문제
- 1. 각도 2 - 배경 서비스
- 2. GraphQL + 각도 2 서비스
- 3. 각도 2 : 서비스 전화
- 4. 각도 2 서비스 ... 무의미한가요?
- 5. 추천 서비스 건축물 각도 2
- 6. 각도 2 : 다중 HTTP 서비스
- 7. transpile 서비스 모듈 각도 2
- 8. 각도 2 HTTP 서비스 동기화
- 9. 2 분사 각도 서비스 (BaseRequestOptions)
- 10. 각도 2/4 FileReader 서비스
- 11. 기본 각도 2 Typescript 서비스 설정
- 12. 각도 2 서비스 기능의 변경을 확인하십시오.
- 13. 각도 2 더 나은 메시지 서비스
- 14. 각도기 테스트에서 모의 각도 2 서비스
- 15. 각도 2 RC4 Route Guards 서비스 주사
- 16. 각도 2 : 부트 스트랩 전에 전화 서비스
- 17. 각도 2 적절한 인증 서비스 사용
- 18. 각도 2 반환 값이 지정되지 않은 서비스
- 19. 각도 2 인 프런트 엔드 "마이크로 서비스"
- 20. 각도 2 서비스 의존성 주입 문제
- 21. 각도 2 - BehaviorSubject with Loop를 만드는 서비스
- 22. 각도 2 인터페이스 및 LocalStorage 서비스
- 23. 각도 2 : 지연로드 모듈의 서비스 범위
- 24. 각도 2 - Instantiate (Http) 서비스 수동으로
- 25. 각도 2 : 서비스 변수 및 뷰 업데이트
- 26. 각도 2 서비스 업데이트 UI 변경시
- 27. 각도 2 서비스 메서드에서 부울 값을 반환합니다.
- 28. DarkSkyApi를 통한 각도 2 서비스 단위 테스트
- 29. 각도 2 HTTP 서비스 약속을 반환하지 않습니다
- 30. 각도 2 - 서비스 간 값 전송