Умные и глупые компоненты в Angular

Различные типы компонентов в Angular

Когда вы начинаете создавать приложения с помощью UI-фреймворков, таких как Angular и React, первое, с чем вы столкнетесь, - это концепция компонентов. Компоненты могут показаться довольно простыми, но это намного больше, чем кажется на первый взгляд. Структура компонентов разбивает страницу на части и помогает очень гибко управлять страницей, инкапсулируя все стили, разметки и бизнес-логику в каждый отдельный компонент, а затем вы объединяете их для создания своего приложения.

С учетом сказанного, погружаясь в компоненты, вы можете спросить:

Существуют ли другие типы компонентов?

Да, есть два типа или, скорее, концепции компонентов.

• Умные компоненты
• Тупые компоненты

Тупые компоненты

В реальном мире Мы часто считаем глупыми тех людей, у которых нет чувства цели или которые зависят от других, чтобы продвинуться вперед или добиться чего-то. Именно этим и является тупой компонент в мире программирования. Компонент, который абсолютно ничего не делает сам по себе и зависит от более умных компонентов.

Все, что делают немые компоненты, представляют себя в DOM. Поэтому их также называют « презентационными компонентами » или чем-то еще, что называется « изолированными компонентами ».

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>

Умные компоненты

Умные компоненты - это те компоненты, которые знают, как обрабатывать данные, как получать данные из служб, как взаимодействовать со службами и отслеживать состояние, и заботятся о том, как приложение работает в целом. Они называются контейнерами, поскольку они отправляют данные в Dumb Components через привязки свойств.

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>

Вывод

Используя эти концепции, мы разделили код бизнес-логики и код представления между интеллектуальными и простыми компонентами. Этот стажер позволяет одному компоненту выполнять всю тяжелую работу, оставляя другие для плавного отображения данных.

Вот и все, я надеюсь, что этот пост помог вам понять эти концепции, если бы не забыл нажать кнопку хлопка. Вот ссылка на код на Github:

Вы также можете прочитать другую мою статью о веб-компоненте, если хотите.

В заключение! Спасибо за чтение и удачного кодирования!