Angular kártyák mintái az alkalmazásunkból

Töltse le alkalmazásunkat az App Store-ból vagy a Google Play-ből, hogy több ingyenes tanulókártyához jusson, vagy iratkozzon fel az összes tanulókártya eléréséhez.

Ismertesse, hogyan lehet HTTP Interceptorokat használni az Angularban a kérések és válaszok kezelésére.

Az Angular HTTP Interceptor segít manipulálni a HTTP kéréseket és válaszokat. Meg tudnak szakítani egy kérést, módosítani azt és továbbítani. Egy választ is lehet szakítani, módosítani és továbbítani. Az HTTP Interceptor használatához létre kell hoznunk egy szolgáltatást, amely implementálja az HttpInterceptor interfészt.

Íme a kód, amely szemlélteti, hogyan adhatunk az alkalmazáshoz interceptorokat:

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class MyHttpInterceptor implements HttpInterceptor {

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    // Itt változtatjuk meg a kérést
    const modifiedReq = req.clone({
      headers: req.headers.set('Authorization', 'My value'),
    });

    // Itt továbbítjuk a kérést
    return next.handle(modifiedReq);
  }
}

Miután meghatároztuk az Interceptor-unkat, hozzá kell adnunk a szolgáltatóink tömbjéhez az alkalmazás moduljában:

@NgModule({
  ...
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: MyHttpInterceptor, multi: true },
  ],
  ...
})
export class AppModule { }

Jegyezzük meg, hogy a 'multi' értéke igazra van állítva. Ez lehetővé teszi, hogy több interceptor-t is hozzáadjunk, amelyeket a megadásuk sorrendjében hajtanak végre. Emlékezni kell arra, hogy az Interceptor-ok sorrendje számít, mivel minden további interceptor a kérelmet az előzőtől kapja, így az előző interceptor által végzett módosítások láthatóak lesznek a következő számára.

Hogyan működik az adatkötés az Angular komponensekben az @Input() és @Output() használatával?

Az adatkötés a programozás kulcsfontosságú aspektusa az Angularban. Lehetővé teszi az adatok dinamikus továbbítását a komponensek között. Az adatkötés két technikát tartalmaz: @Input és @Output.

Az @Input lehetővé teszi az értékek továbbítását a szülő komponenstől a gyermek komponensnek. Ez az úgynevezett egyirányú adatkötési technika - az adatok a komponens hierarchia tetejéről az aljára folytatódnak. Ezt használjuk azoknak a változóknak a jelölésére, amelyeknek láthatónak kell lenniük a szülő komponensek számára.

Az @Input használatának példája:

<!--parent.component.html-->
<app-child [childMessage]="parentMessage"></app-child>

// parent.component.ts
parentMessage = "Üzenet a szülőtől";

// child.component.ts
import {Component,Input }  from '@angular/core';
//..
@Input() childMessage: string;

A fenti példában a `parentMessage` az parent.component.ts-ből továbbítódik a `childMessage`-nek a child.component.ts-be.

Az @Output viszont lehetővé teszi a kommunikációt az ellentétes irányba - a gyermek komponenstől a szülőig. Ez az úgynevezett esemény-kötési technika. Az @Output() dekorátorral eseményt indíthatunk a gyermek komponensben és kezelhetjük azt a szülő komponensben.

Az @Output használatának példája:

<!--parent.component.html-->
<app-child (messageEvent)="receiveMessage($event)"></app-child>

// parent.component.ts
receiveMessage($event) {
  this.message = $event
}

// child.component.ts
import { Component, Output, EventEmitter } from '@angular/core';
//..
@Output() messageEvent = new EventEmitter<string>();

Ebben az esetben, amikor a `messageEvent` kiváltódik a child.component.ts-ben, a `receiveMessage` funkció hívódik meg a parent.component.ts-ben és megkapja az általa küldött `messageEvent` értéket.

Mi az NgModel és hogyan használható az Angular űrlapokban?

NgModel egy Angular irányelv, amelyet kétkötésű adatkötés létrehozásához használunk az űrlapokban. A kétkötésű adatkötés azt jelenti, hogy az adatokat a modellből a nézetbe, és a nézetből a modellbe is továbbíthatjuk. Gyakorlatban ez azt jelenti, hogy a felhasználó által az űrlapmezőkben végrehajtott változtatások megjelennek az adatmodellben, illetve az adatmodellben történő változások láthatóak lesznek az űrlapon.

Az NgModel irányelv használata az űrlapokban elég egyszerű. Helyezzük el a megfelelő helyre az űrlapelemet, és kössük a megfelelő modelmezőhöz a [(ngModel)] szintaxis használatával.

Például:

<form>
  <label for="name">Név:</label>
  <input id="name" [(ngModel)]="person.name">

  <label for="age">Kor:</label>
  <input id="age" [(ngModel)]="person.age">
</form>

Ahol a "person.name" és a "person.age" adatmodell mezők, melyek az űrlapmezőkhöz vannak kötve. A felhasználó által ezekben az űrlapmezőkben végrehajtott bármely változtatás automatikusan megjelenik a "person" modellben.

Ne felejtsük el, hogy az NgModel irányelv használatához szükséges importálni a FormsModule-t az alkalmazás moduljába.

Mi az a Zone.js az Angularban és hogyan befolyásolja az alkalmazás teljesítményét?

A Zone.js egy olyan könyvtár, amely lehetővé teszi az aszinkron műveletek nyomon követését a JavaScriptben. Az Angular kontextusában a Zone.js az észlelési mechanizmus kulcskomponense.

A Zone.js bevezeti a "zónák" koncepcióját, amelyek globális végrehajtási kontextusok. Ezek a "zónák" egy "fát" hoznak létre, ahol minden aszinkron művelet mindig ugyanabban a zónában történik, amely elindította a műveletet. Ennek eredményeként képesek vagyunk nyomon követni, mikor kezdődik el egy művelet és mikor fejeződik be.

Példa:
Az első művelet indíthat egy setTimeout-ot, amellyel a következő műveletet az eseményhurok következő körére tervezik. Bár ez két külön művelet, a Zone.js lehetővé teszi számunkra, hogy egy egészként kövessük őket - ez az aszinkron követés.

Az Angularban a Zone.js-t arra használják, hogy tájékoztassák a keretrendszert, mikor kezdje el az észlelést. Minden felhasználói művelet, időzítő vagy http kérés az "angular zónában" történik. Amikor a műveletek az "angular zónában" befejeződnek, az Angular automatikusan észlelést indít.

Ezzel a mechanizmussal az Angular tudja, mikor van értelme frissíteni a nézetet. Ezért a Zone.js létfontosságú a teljesítmény szempontjából. A Zone.js nélkül az Angular olyan technikákat kellene alkalmaznia, mint a szondázás, hogy megtudja, mikor kell indítani az észlelést, ami rendkívül hatástalan lenne.

Bár a Zone.js pozitív hatással van az Angular teljesítményére, negatív hatással is lehet. Ha egy alkalmazás rengeteg aszinkron műveletet hajt végre, amelyek nem befolyásolják az alkalmazás állapotát, az Angular még mindig észlelést indít. Nagy mennyiségű művelet esetén ez ronthatja a teljesítményt. Ennek elkerülése érdekében ezeket a műveleteket az "angular zónán" kívül hajthatjuk végre.

Angular kártyák