如何从 angular 2+ 的服务中获取屏幕调整尺寸? [英] How to get a screen resize dimension from a service in angular 2+?

问题描述

首先这不是重复的需要时间来阅读，因为有很多类似的问题，但它们在@Component装饰器中

我的想法是在服务中捕获屏幕调整大小，然后通过可观察对象共享一些 css 值，但我的服务似乎无法正常工作(无法捕获屏幕调整大小事件).

I got the idea to catch screen resizing in a service then sharing some css value by an observable, but it seem that my service is not working (not able to catch screen resize event).

这是我的代码

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() { }
}

有没有办法做到这一点，或者这是无法从服务中获得的?

Is there any way to do this or this is incheavable from a service ?

推荐答案

所以我没有在你的 OP 中看到你在哪里初始化服务.我不得不在一个应用程序中完成这几乎完全相同的事情.我们观察屏幕大小的变化，这会触发本地存储中某些用户偏好的变化:

So I did not see in your OP where you are initializing the service. I had to do this almost exact thing in one app. We watch for screen size changes which triggers changes in some user preferences in local storage:

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 来初始化

Then in order for the service to work it is initialized by injecting it into the app.component.ts in the constructor param

constructor(
    private userPreferenceService: UserPreferencesService,
) {this.userPreferenceService.init();}

这篇关于如何从 angular 2+ 的服务中获取屏幕调整尺寸?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！