Các thành phần Smart & Dumb trong Angular

Các loại thành phần khác nhau trong Angular

Khi bạn bắt đầu xây dựng ứng dụng với các khung giao diện người dùng như Angular và React, điều đầu tiên bạn phải đối mặt là khái niệm về các thành phần. Các thành phần có thể trông khá đơn giản nhưng có rất nhiều thứ hơn là bắt mắt. Cấu trúc Thành phần chia trang thành nhiều phần và giúp bạn quản lý trang của mình theo cách rất linh hoạt bằng cách đóng gói tất cả các kiểu, đánh dấu và logic nghiệp vụ vào từng Thành phần riêng lẻ, sau đó bạn hợp nhất chúng để xây dựng ứng dụng của mình.

Như đã nói, khi đi sâu vào các thành phần, bạn có thể hỏi:

Có các loại linh kiện khác nhau không?

Có, có hai loại hoặc đúng hơn là khái niệm về các thành phần.

• Thành phần thông minh
• Các thành phần câm

Các thành phần câm

Trong thế giới thực, Chúng ta thường coi những người đó là những kẻ ngu ngốc không có ý thức về mục đích hoặc phụ thuộc vào người khác để tiến lên phía trước hoặc đạt được mọi thứ. Đó cũng chính là điều mà Thành phần Dumb có trong thế giới lập trình. Một Thành phần hoàn toàn không tự làm gì và phụ thuộc vào Thành phần Thông minh hơn.

Tất cả các Thành phần câm làm đều tự xuất hiện trong DOM. Do đó chúng còn được gọi là “ Các thành phần trình bày ” hoặc một cái gì đó được gọi là “ Các thành phần biệt lập ”.

import{ Component, Input, OnInit } from ‘@angular/core’;
@Component({
selector: ‘app-book-list’,
templateUrl: ‘./book-list.component.html’,
styleUrls: [‘./book-list.component.css’]
})
export class BookListComponent implements OnInit {
@Input(‘book’) book: any[];
constructor() { }
ngOnInit() {
}
}

<div class="books-list-container">
<h3>{{book.volumeInfo.title}}</h3>
<p>{{book.volumeInfo.authors[0]}}</p>
<p>{{book.description}}</p>
</div>

Các thành phần thông minh hơn

Thành phần thông minh là những thành phần biết cách xử lý dữ liệu, Cách tìm nạp dữ liệu từ các dịch vụ, Cách tương tác với các dịch vụ và theo dõi trạng thái cũng như quan tâm đến cách toàn bộ ứng dụng hoạt động. Chúng được gọi là vùng chứa khi chúng gửi dữ liệu đến các Thành phần Dumb thông qua các ràng buộc thuộc tính.

import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpHeaders} from '@angular/common/http';
import {map} from 'rxjs/operators';
import { Observable } from 'rxjs';
@Component({
selector: 'app-books',
templateUrl: './books.component.html',
styleUrls: ['./books.component.css']
})
export class BooksComponent implements OnInit {
private API_KEY:string = 'API_KEY';
book: Observable<any[]>;
constructor(private _http: HttpClient) { }
ngOnInit() {
const URL = 'https://www.googleapis.com/books/v1';
//Fetch All Books from API
//@Params = URL: String
this.fetchBooks(URL);
}
fetchBooks(URL: string){
this.book = this._http.get<any>(`${URL}/q=&key=${this.API_KEY}`,             {headers}).pipe(
   map(resp=>{
    return resp.items;
   });
 );
}}

<app-book-list [book]="book | async"></app-book-list>

Phần kết luận

Sử dụng các khái niệm này, chúng tôi đã tách mã logic nghiệp vụ và mã trình bày giữa các thành phần thông minh và câm. Thực tập sinh này cho phép một thành phần thực hiện tất cả các công việc nặng nhọc trong khi để các thành phần khác hiển thị dữ liệu trơn tru.

Vậy là xong, tôi hy vọng bài đăng này đã giúp xây dựng một số hiểu biết về những khái niệm này nếu bạn không quên nhấn nút vỗ tay. Đây là liên kết Github cho mã:

Bạn cũng có thể đọc bài viết khác của tôi về thành phần web nếu bạn muốn.

Tìm hiểu sâu về các thành phần web

Cuối cùng! Cảm ơn vì đã đọc và viết mã vui vẻ!