尝试使用Angular CDK布局

2 年 ago
逸, 科
2 minutes

首先

因为之前一直想尝试却没有动手，最近我稍微接触了一下Angular CDK，所以我想留下一些笔记。

你可以通过查看@Quramy的《Angular Component Dev Kit入门》一文，了解Angular中CDK所提供的功能以及为什么要学习CDK的原因等内容，从而更容易理解。

我尝试使用Angular CDK中易于理解的API，即使不是库的开发者，也可以直接在应用程序的实现中使用它提供的布局。

公式文档：https://material.angular.io/cdk/layout/overview

准备就绪

安装

$ ng new cdk-test
$ cd cdk-test
$ npm i @angular/cdk

使用Angular Material的项目应该已经安装了CDK，所以不需要再安装。

将CDK模块导入

将LayoutModule导入到app.module中，并将其添加到AppModule的imports中。

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]
})
export class AppModule {}

到目前为止，CDK Layout的功能已经准备就绪，可以开始使用了。

断点观察者

使用BreakpointObserver，可以通过Observable接收到与预先设定的断点相对应的屏幕尺寸变化。在创建响应式屏幕时，通过使用*ngIf等功能非常方便。

获取通知画面大小变化的Observable。

这次我们将在 app.component 中直接使用 BreakpointObserver。（实际上，在实际使用时，最好将其拆分为一个服务）

import { Component, OnInit } from '@angular/core';
import { BreakpointObserver, Breakpoints, BreakpointState } from '@angular/cdk/layout';
import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of';
import { map } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  isMobile$: Observable<boolean> = of(false);

  constructor(private breakpointObserver: BreakpointObserver) {}

  ngOnInit() {
    // BreakpointObserverから画面幅の変更を取得してBooleanに変換
    this.isMobile$ = this.breakpointObserver.observe(Breakpoints.XSmall).pipe(
      map((state: BreakpointState) => state.matches)
    );

    // consoleで確認
    this.isMobile$.subscribe((isMobile: boolean) => console.log('isMobile:', isMobile));
  }
}
    • BreakpointObserverをDIする

 

    BreakpointObserver.observeにブレイクポイント情報を渡して変更を通知するObservableを取得

将断点设置为用户定义的值

如果要设置除预先准备的Breakpoints以外的值，可以按照以下的方式，以css媒体查询的格式将断点信息传递给observe函数。

this.breakpointObserver.observe('(max-width: 768px)')...

如果需要严格指定最小值和最大值的情况下，请使用数组传递。

    this.breakpointObserver.observe([
      '(min-width: 480px)',
      '(max-width: 768px)',
    ])...

媒体匹配器

MediaMatcher.matchMedia()是Window.matchMedia()的包装器。它可以在Angular的类内同步地获取CSS媒体查询是否满足条件的信息。

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

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

  constructor(private mediaMatcher: MediaMatcher) {}

  ngOnInit() {
    // 戻り値はネイティブのMediaQueryList型を返す
    const mediaQueryList = this.mediaMatcher.matchMedia('(min-width: 1000px)');
    // consoleで確認
    console.log(mediaQueryList);
  }
}

当查看BreakpointObserver的实现时，可以看到在MediaMatcher.matchMedia()中获取的MediaQueryList上添加了addListener。相比于BreakpointObserver，我认为直接使用这个API的情况并不太多。

结束

虽然内容相当粗糙且没有整理好，但希望能够抓住Angular CDK布局（尤其是BreakpointObserver）的感觉。

我还想尝试其他CDK模块的功能。

bannerAds