angular - 如何从角度 2+ 的服务中获取屏幕调整大小尺寸?
问题描述
首先,这不重复需要时间阅读,因为有很多类似的问题,但它们在 @Component 装饰器中
我的想法是在服务中捕获屏幕调整大小,然后通过可观察对象共享一些 css 值,但似乎我的服务无法正常工作(无法捕获屏幕调整大小事件)。
这是我的代码
import { Injectable, HostListener } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable({
providedIn: 'root',
})
export class BreakPointService {
normal: {
background: 'w3-teal',
inputColor: 'w3-light-grey',
css_parent: 'w3-container w3-teal'
};
breakpoint: {
background: 'w3-dark-blue',
inputColor: 'w3-white',
css_parent: 'w3-container w3-light-grey'
};
breakPointValue: number;
css_behaviour = new BehaviorSubject(JSON.stringify(this.breakpoint));
current_css = this.css_behaviour.asObservable();
@HostListener('window:resize', ['$event'])
onResize(event) {
console.log();
this.breakPointValue = window.innerWidth;
console.log(this.breakPointValue);
if (this.breakPointValue > 768) {
console.log(JSON.stringify(this.normal));
this.css_behaviour.next(JSON.stringify(this.normal));
} else {
console.log(JSON.stringify(this.breakpoint));
this.css_behaviour.next(JSON.stringify(this.breakpoint));
}
}
public css() {
if (this.breakPointValue > 768) {
return this.normal;
}
return this.breakpoint;
}
constructor() { }
}
有什么办法可以做到这一点,或者这是无法从服务中获得的?
解决方案
所以我没有在您的 OP 中看到您正在初始化服务的位置。我必须在一个应用程序中完成几乎完全相同的事情。我们观察屏幕尺寸的变化,这会触发本地存储中某些用户偏好的变化:
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { TableViewTypes, MediaSizes, UserPreferencesDefaults, TableView, getTableViewDefaults } from '../models/user-preferences.model';
import { StorageService } from './storage.service';
@Injectable()
export class UserPreferencesService {
private tableViewSubject = new BehaviorSubject<TableView>(UserPreferencesDefaults.tableView);
tableView$ = this.tableViewSubject.asObservable();
constructor(
private storageService: StorageService
) {}
init() {
this.tableViewSubject.next(
!(window.outerWidth > MediaSizes.sm) ?
getTableViewDefaults(false) :
UserPreferencesDefaults.tableView
);
window.addEventListener('resize', () => {
this.tableViewSubject.next(
!(window.outerWidth > MediaSizes.sm) ?
getTableViewDefaults(false) :
this.storageService.userPreferences.tableView
);
});
}
storeTableView(tableType: TableViewTypes, value: boolean) {
this.storageService.userPreferences = {
...this.storageService.userPreferences,
tableView: {
...this.storageService.userPreferences.tableView,
[tableType]: value
}
};
}
toggleTableView(tableType: TableViewTypes, value?: boolean) {
value = value !== undefined && value !== null ? value : !this.storageService.userPreferences.tableView[tableType];
this.tableViewSubject.next({
...this.storageService.userPreferences.tableView,
[tableType]: value
});
this.storeTableView(tableType, value);
}
}
然后为了使服务工作,通过将其注入到构造函数参数中的 app.component.ts 来初始化它
constructor(
private userPreferenceService: UserPreferencesService,
) {this.userPreferenceService.init();}
推荐阅读
- python-3.x - 为什么在尝试解码我的 base32 字符串时出现“不正确的填充”错误?
- json - 在 Hyperledger Fabric 中存储 JSON 文档
- c# - 如何查询特定类型然后获取基础文档
- javascript - 创建新数组产生未定义的函数
- c# - 为什么关闭连接后可打印项目从打印队列中消失并且没有任何反应?
- testing - 播放:自动化测试数据设置
- javascript - 在 React Final Form 中,为嵌套字段提供初始值
- reflection - 声明后如何访问 ProtoField 的名称?
- linux - Linux Xdebug(再次)
- jupyter-notebook - 事件循环在启动 jupyter notebook 时运行错误