Beispiel-Angular-Karteikarten aus unserer App

Laden Sie unsere App aus dem App Store oder Google Play herunter, um mehr kostenlose Lernkarten zu erhalten, oder abonnieren Sie für Zugriff auf alle Lernkarten.

Beschreiben Sie, wie HTTP-Interceptors in Angular verwendet werden, um Anfragen und Antworten zu verwalten.

HTTP Interceptor in Angular wird verwendet, um HTTP-Anfragen und -Antworten zu manipulieren. Sie können eine Anfrage abfangen, modifizieren und weiterleiten. Sie können auch eine Antwort abfangen, modifizieren und weiterleiten. Um einen HTTP Interceptor zu verwenden, müssen wir einen Service erstellen, der das HttpInterceptor-Interface implementiert.

Hier ist der Code, der veranschaulicht, wie Interceptor zur Anwendung hinzugefügt werden:

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>> {

    // Hier modifizieren wir die Anfrage
    const modifiedReq = req.clone({
      headers: req.headers.set('Authorization', 'My value'),
    });

    // Hier leiten wir die Anfrage weiter
    return next.handle(modifiedReq);

  }

}

Sobald unser Interceptor definiert ist, müssen wir ihn zu unserem Array von Anbietern im Anwendungsmodul hinzufügen:

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

Beachten Sie, dass 'multi' auf true gesetzt ist. Dies ermöglicht uns die Hinzufügung von mehreren Interceptors, die in der Reihenfolge ausgeführt werden, in der sie bereitgestellt werden. Sie müssen sich daran erinnern, dass die Reihenfolge der Interceptors wichtig ist, da jeder nachfolgende Interceptor die Anfrage vom vorherigen erhält, sodass alle Änderungen, die vom vorherigen Interceptor vorgenommen wurden, für den nächsten sichtbar sind.

Wie funktioniert Data Binding in Angular-Komponenten mit @Input() und @Output()?

Data Binding ist ein wichtiger Aspekt der Programmierung in Angular. Dadurch ist es möglich, Daten dynamisch zwischen Komponenten zu übertragen. Data Binding umfasst zwei Techniken: @Input und @Output.

@Input ermöglicht die Übertragung von Werten von der Elternkomponente zur Kindkomponente. Dies ist eine sogenannte Einweg-Datenbindungstechnik - Daten fließen von oben nach unten in der Komponentenhierarchie. Wir verwenden sie, um Variablen zu markieren, die für Elternkomponenten sichtbar sein sollen.

Beispiel für die Verwendung von @Input:

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

// parent.component.ts
parentMessage = "Hallo von Eltern";

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

Im obigen Beispiel wird `parentMessage` aus parent.component.ts an `childMessage` in child.component.ts übergeben.

@Output hingegen ermöglicht eine Kommunikation in umgekehrter Richtung - von der Kindkomponente zur Elternkomponente. Dies ist die sogenannte Ereignisbindungstechnik. Mit dem @Output()-Dekorator können wir ein Ereignis in der Kindkomponente auslösen und es in der Elternkomponente behandeln.

Beispiel für die Verwendung von @Output:

<!--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>();

In diesem Fall wird, wenn `messageEvent` in child.component.ts ausgelöst wird, die Funktion `receiveMessage` in parent.component.ts aufgerufen und erhält den von `messageEvent` gesendeten Wert.

Was ist NgModel und wie wird es in Angular-Formularen verwendet?

NgModel ist eine Angular-Direktive, die verwendet wird, um eine bidirektionale Datenbindung in Formularen zu erstellen. Bidirektionale Datenbindung bedeutet, dass Daten vom Modell zur Ansicht und von der Ansicht zum Modell übertragen werden können. In der Praxis bedeutet dies, dass Änderungen, die der Benutzer in den Formularfeldern vornimmt, im Datenmodell widergespiegelt werden, und Änderungen am Datenmodell in dem Formular sichtbar sind.

Die Verwendung der NgModel-Direktive in Formularen ist recht einfach. Wir platzieren sie im entsprechenden Formularelement und binden sie mit der [(ngModel)]-Syntax an das entsprechende Modellfeld.

Zum Beispiel:

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

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

Wo "person.name" und "person.age" Modelldatenfelder sind, die an die entsprechenden Formularfelder gebunden sind. Jegliche Änderungen, die der Benutzer in diesen Formularfeldern vornimmt, werden automatisch im Modell "person" widergespiegelt.

Denken Sie daran, um die NgModel-Direktive zu verwenden, ist es notwendig, das FormsModule im Anwendungsmodul zu importieren.

Was ist Zone.js in Angular und wie beeinflusst es die Leistung der Anwendung?

Zone.js ist eine Bibliothek, die das Verfolgen von asynchronen Operationen in JavaScript ermöglicht. Im Kontext von Angular ist Zone.js eine Schlüsselkomponente des Änderungserkennungsmechanismus.

Zone.js führt das Konzept der "Zonen" ein, die globale Ausführungskontexte sind. Diese "Zonen" bilden einen "Baum", in dem jede asynchrone Operation immer in der gleichen Zone durchgeführt wird, die die Operation gestartet hat. So können wir nachverfolgen, wann eine Operation beginnt und wann sie endet.

Beispiel:
Die erste Operation kann ein setTimeout auslösen, wodurch die nächste Operation für den nächsten Durchlauf der Ereignisschleife geplant wird. Obwohl dies zwei verschiedene Operationen sind, ermöglicht uns Zone.js, sie als Ganzes zu verfolgen - das ist asynchrone Überwachung.

In Angular wird Zone.js eingesetzt, um das Framework zu informieren, wann die Änderungserkennung beginnen soll. Jede Benutzeraktion, Timer oder HTTP-Anforderung wird in der "Angular-Zone" durchgeführt. Wenn die Operationen in der "Angular-Zone" abgeschlossen sind, löst Angular automatisch die Änderungserkennung aus.

Mit diesem Mechanismus weiß Angular, wann es sinnvoll ist, die Ansicht zu aktualisieren. Deshalb ist Zone.js für die Performance entscheidend. Ohne Zone.js müsste Angular Techniken wie Polling verwenden, um herauszufinden, wann die Änderungserkennung ausgelöst werden soll, was sehr ineffizient wäre.

Obwohl Zone.js positive Auswirkungen auf die Leistung von Angular hat, kann es auch negative Auswirkungen haben. Wenn eine Anwendung eine Vielzahl von asynchronen Operationen durchführt, die den Zustand der Anwendung nicht beeinflussen, löst Angular immer noch die Änderungserkennung aus. Im Falle einer großen Anzahl von Operationen könnte dies die Leistung beeinträchtigen. Um dies zu verhindern, können wir diese Operationen außerhalb der "Angular-Zone" durchführen.

Angular-Karteikarten

Beispiel-Angular-Karteikarten aus unserer App

Beschreiben Sie, wie HTTP-Interceptors in Angular verwendet werden, um Anfragen und Antworten zu verwalten.

Wie funktioniert Data Binding in Angular-Komponenten mit @Input() und @Output()?

Was ist NgModel und wie wird es in Angular-Formularen verwendet?

Was ist Zone.js in Angular und wie beeinflusst es die Leistung der Anwendung?

Jetzt herunterladen IT Flashcards