在 Angular 中使用适当的 CSS 媒体查询

Question

我在 Angular 中读到，使用CSS隐藏元素来隐藏这样的元素是一种非常糟糕的做法：

.container{
  background-color : powderblue;
  height : 50px;
  width : 100%
}

@media (max-width: 400px){
    .container{
        display: none;
    }

}

<div class="container"></div>

而且我知道显示或隐藏元素的 Angular 方式是使用*ngIf指令。

题

我怎样才能* ngIf以“角度方式”对媒体查询做出反应？

Answer 1

您可以使用angular/breakpoints-angular-cdk

按着这些次序

在终端上

npm install @angular/cdk

然后导入布局模块并将其添加到 NgModule 的导入列表中

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { LayoutModule } from '@angular/cdk/layout';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
  AppComponent
],
imports: [
    BrowserModule,
    LayoutModule
],
providers: [],
bootstrap: [AppComponent]
})

在你可以在你的组件中使用它之后，只需从 @angular/cdk/layout

import { Component, OnInit } from '@angular/core';
import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';

@Component({ ... })
export class AppComponent implements OnInit {
  public showContainer: boolean;
  constructor(public breakpointObserver: BreakpointObserver) {}

  ngOnInit() {
    this.breakpointObserver
      .observe(['(min-width: 400px)'])
      .subscribe((state: BreakpointState) => {
        if (state.matches) {
          this.showContainer = true;
        } else {
          this.showContainer = false;
        }
      });
  }
}

检查文档它是一个简单的 API

Answer 2

Angular Flex 布局是更好的解决方案。您不需要媒体查询，并且它具有特殊的响应功能来显示和隐藏例如

fxShow：此标记指定是否应显示其宿主元素

<div fxShow [fxShow.xs]="isVisibleOnMobile()"></div>

fxHide：此标记指定是否不应显示其宿主元素

<div fxHide [fxHide.gt-sm]="isVisibleOnDesktop()"></div>

无需编写大量 CSS，并且与 Angular 材质非常兼容。 https://github.com/angular/flex-layout