Smart & Dumb-Komponenten in Angular

Verschiedene Komponententypen in Angular

Wenn Sie anfangen, Apps mit UI-Frameworks wie Angular und React zu erstellen, werden Sie als erstes mit dem Konzept der Komponenten konfrontiert. Komponenten mögen recht einfach erscheinen, aber es steckt viel mehr dahinter, als man denkt. Die Komponentenstruktur unterteilt die Seite in Blöcke und hilft Ihnen dabei, Ihre Seite auf sehr flexible Weise zu verwalten, indem alle Stile, Markups und Geschäftslogiken in jede einzelne Komponente eingekapselt und anschließend zum Erstellen Ihrer App zusammengeführt werden.

Wenn Sie in Komponenten eintauchen, könnten Sie fragen:

Gibt es verschiedene Arten von Komponenten?

Ja, es gibt zwei Arten bzw. Konzepte von Komponenten.

• Intelligente Komponenten
• Dumme Komponenten

Dumme Komponenten

In der realen Welt betrachten wir oft diejenigen Menschen als dumm, die keinen Sinn für Absichten haben oder von anderen abhängig sind, um voranzukommen oder Dinge zu bekommen. Genau das ist eine dumme Komponente auch in der Programmierwelt. Eine Komponente, die absolut nichts alleine macht und von intelligenteren Komponenten abhängig ist.

Alles, was dumme Komponenten tun, ist sich dem DOM zu präsentieren. Daher werden sie auch als " Präsentationskomponenten " oder als " isolierte Komponenten " bezeichnet.

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>

Intelligentere Komponenten

Intelligente Komponenten sind Komponenten, die wissen, wie man mit Daten umgeht, wie man Daten von Diensten abruft, wie man mit Diensten interagiert und den Status verfolgt und sich um die Funktionsweise der App als Ganzes kümmert. Sie werden als Container bezeichnet, da sie Daten über Eigenschaftsbindungen an Dumb Components senden .

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>

Fazit

Mit diesen Konzepten haben wir den Geschäftslogikcode und den Präsentationscode zwischen intelligenten und dummen Komponenten getrennt. Dieser Praktikant ermöglicht es einer Komponente, das gesamte schwere Heben auszuführen, während die anderen Komponenten die Daten reibungslos anzeigen.

Ich hoffe, dieser Beitrag hat zum Verständnis dieser Konzepte beigetragen, wenn Sie nicht vergessen haben, auf die Schaltfläche "Klatschen" zu klicken. Hier ist der Github-Link für den Code:

Sie können auch meinen anderen Artikel über die Webkomponente lesen, wenn Sie möchten.

Ein tiefer Einblick in Webkomponenten

Schließlich! Danke fürs Lesen und Happy Coding!