Angular CDK (Component Dev Kit) là công cụ mạnh mẽ để xây dựng các ứng dụng web hiện đại với khả năng phản hồi, cung cấp API phong phú và các công cụ thực tế giúp nhà phát triển dễ dàng triển khai giao diện tương thích từ thiết bị di động đến nền tảng máy tính để bàn. Bài viết này sẽ chi tiết cách tận dụng các chức năng cốt lõi của hệ thống bố cục Angular CDK để nhanh chóng tạo ra các giao diện chuyên nghiệp có khả năng phản hồi.

Tại sao nên chọn hệ thống bố cục Angular CDK?

Hệ thống bố cục Angular CDK giải quyết các hạn chế của truy vấn phương tiện CSS truyền thống trong các ứng dụng phức tạp bằng cách cung cấp quản lý điểm ngắt tiêu chuẩn, nhận biết hướng và các công cụ phản hồi. Nó tích hợp sâu với framework Angular và hỗ trợ kiểm tra kiểu TypeScript, giúp logic bố cục dễ bảo trì và kiểm thử hơn.

Bắt đầu nhanh: Cài đặt và cấu hình cơ bản

Để bắt đầu sử dụng hệ thống bố cục CDK, bạn cần cài đặt các dependency qua Angular CLI:

ng add @angular/material

Quá trình cài đặt sẽ tự động cấu hình các dependency CDK, với luồng làm việc bên trong như sau:

Các chức năng bố cục cốt lõi nằm trong gói @angular/cdk/layout, chủ yếu bao gồm hai công cụ chính là BreakpointObserver và MediaMatcher.

Chức năng cốt lõi: BreakpointObserver - Trình quan sát điểm ngắt

BreakpointObserver là dịch vụ cốt lõi của hệ thống bố cục CDK, cho phép bạn phản hồi thay đổi kích thước màn hình dựa trên truy vấn phương tiện được định nghĩa trước hoặc tùy chỉnh.

Hệ thống điểm ngắt được định nghĩa trước

CDK cung cấp bộ sưu tập điểm ngắt tuân thủ quy chuẩn Material Design, bao phủ các kích thước thiết bị từ điện thoại đến máy tính để bàn:

Phát hiện kích thước viewport hiện tại

Sử dụng phương thức isMatched để nhanh chóng xác định viewport hiện tại có khớp với điều kiện cụ thể:

import { BreakpointObserver } from '@angular/cdk/layout';

constructor(private viewportObserver: BreakpointObserver) {
  // Kiểm tra xem có phải là thiết bị di động
  const isMobileDevice = viewportObserver.isMatched('(max-width: 599px)');
  console.log('Thiết bị di động:', isMobileDevice);
}

Phản hồi thay đổi viewport

Thực hiện đăng ký sự kiện thay đổi viewport để điều chỉnh bố cục động:

// Quan sát trạng thái ngang/dọc của thiết bị di động
this.viewportObserver.observe([
  '(orientation: landscape)',
  '(orientation: portrait)'
]).subscribe(result => {
  if (result.matches) {
    this.optimizeMobileLayout(); // Điều chỉnh bố cục theo hướng thiết bị
  }
});

Thủ thuật thực chiến: Tối ưu hóa đa nền tảng

1. Điều hướng phản hồi

Kết hợp các component Angular Material và hệ thống bố cục CDK, bạn có thể dễ dàng triển khai điều hướng tự thích ứng:

// Trong component
screenMediaQuery: MediaQueryList;

constructor(private mediaDetector: MediaMatcher) {
  this.screenMediaQuery = mediaDetector.matchMedia('(max-width: 600px)');
}

Hiển thị các kiểu điều hướng khác nhau trong template dựa trên truy vấn:

<mat-toolbar *ngIf="screenMediaQuery.matches">Điều hướng di động</mat-toolbar>
<mat-sidenav-container *ngIf="!screenMediaQuery.matches">
  <!-- Điều hướng sidebar cho máy tính để bàn -->
</mat-sidenav-container>

2. Bố cục nội dung động

Sử dụng trình quan sát điểm ngắt để chuyển đổi bố cục nội dung thông minh:

ngOnInit() {
  this.viewportObserver.observe(['(min-width: 960px)', '(min-width: 1280px)'])
    .subscribe(result => {
      if (result.matches) {
        this.columnCount = 4; // Màn hình lớn hiển thị 4 cột
      } else {
        this.columnCount = 2; // Màn hình nhỏ hiển thị 2 cột
      }
    });
}

3. Bố cục nhận biết hướng

Dịch vụ Directionality của CDK cung cấp hỗ trợ gốc cho bố cục RTL (từ phải sang trái), đặc biệt phù hợp với các ứng dụng quốc tế hóa:

import { Directionality } from '@angular/cdk/bidi';

constructor(private layoutDirection: Directionality) {
  console.log('Hướng bố cục hiện tại:', layoutDirection.value); // 'ltr' hoặc 'rtl'
}

Tài nguyên học sâu

• Tài liệu bố cục chính thức: src/cdk/layout/layout.md
• API trình quan sát điểm ngắt: goldens/cdk/layout/index.api.md
• Hướng dẫn UI phản hồi Material Design: Material Design responsive UI guidelines