Angular 2 项服务 - $mdMedia
Angular 2 Services - $mdMedia
是否有类似于 $mdMedia 的 Angular2 服务?我需要根据 window 的大小显示或隐藏按钮(如果 window 与屏幕大小相同,我想隐藏它)
也许这对你有帮助。
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。 for a description of what it is. Also see https://xgrommx.github.io/rx-book/content/subjects/behavior_subject/index.html
该组件订阅了 BehaviourSubject (window) 并在屏幕尺寸发生变化时获取更新的值。
你可以并且应该使用 flex-layout:
官方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})` : ""
});
}
}
是否有类似于 $mdMedia 的 Angular2 服务?我需要根据 window 的大小显示或隐藏按钮(如果 window 与屏幕大小相同,我想隐藏它)
也许这对你有帮助。
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。
该组件订阅了 BehaviourSubject (window) 并在屏幕尺寸发生变化时获取更新的值。
你可以并且应该使用 flex-layout:
官方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})` : ""
});
}
}