css - 在 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 以“Angular 方式”对媒体查询作出 react ？

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;
        }
      });
  }
}

检查 the docs这是一个简单的 API