Angular2 根据 css 属性/屏幕大小更改操作

Question

我正在创建某种收件箱屏幕。所以我的菜单在左侧，旁边是消息列表。我在 Bootstrap 的网格系统的帮助下创建了这个屏幕。

当您选择一条消息时，它将显示在屏幕的右侧。但是当屏幕太小时，它会隐藏消息(hidden-xs，hidden-sm)。应该发生的是，当我选择一条消息时，它应该显示在同一屏幕上，这已经有效了。但是当屏幕太小时，它应该导航到不同的页面。

我遇到的唯一问题是如何根据屏幕尺寸或 css 属性(可见性:隐藏)更改操作？

所以当屏幕为 md 或 lg 时，消息显示在同一屏幕上，否则它将路由到另一个组件。

Answer 1

您必须使用客户端窗口大小的可观察值，这可以通过使用@angular/flex-layout 来完成，您可以找到 API here .

你的组件.component.ts

import { Component, AfterViewInit } from '@angular/core';
import { ObservableMedia, MediaChange } from '@angular/flex-layout';
import { Subscription } from 'rxjs/Rx';

@Component({
    selector: 'app-your-component',
    templateUrl: './your-component.component.html',
    styleUrls: ['./your-component.component.css']
})
export class YourComponentComponent implements AfterViewInit {

    // Subscription of the observer of the screen size
    mediaQuery$: Subscription;

    // The active media query (xs | sm | md | lg | xl)
    activeMediaQuery: string;

    constructor(
        private observableMedia: ObservableMedia
    ){}

    ngAfterViewInit () {

        this.mediaQuery$ = this.observableMedia.subscribe( (change: MediaChange) => {
            this.activeMediaQuery = `${change.mqAlias}`;
            if (this.activeMediaQuery === 'xs' || this.activeMediaQuery === 'sm') {
                // Here goes code for action in xs or sm (small screen)
            } else {
                // Here goes code for action in gt-sm (bigger screen)
            }
        });
    }
}

希望对您有所帮助!