Exempel på Angular Flashcards från vår app

Ladda ner vår app från App Store eller Google Play för att få fler gratis flashcards eller prenumerera för tillgång till alla flashcards.

Beskriv hur du använder HTTP Interceptors i Angular för att hantera förfrågningar och svar.

HTTP Interceptor i Angular används för att manipulera HTTP-förfrågningar och svar. De kan avlyssna en förfrågan, ändra den och skicka den vidare. De kan också avlyssna ett svar, ändra det och skicka det vidare. För att använda en HTTP Interceptor behöver vi skapa en tjänst som implementerar HttpInterceptor-gränssnittet.

Här är koden som illustrerar hur man lägger till avlyssnare till applikationen:

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

    // Här ändrar vi förfrågan
    const modifiedReq = req.clone({
      headers: req.headers.set('Authorization', 'My value'),
    });

    // Här skickar vi vidare förfrågan
    return next.handle(modifiedReq);

  }

}

När vår Interceptor är definierad behöver vi lägga till den i vårt array av leverantörer i applikationsmodulen:

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

Observera att 'multi' är inställt på true. Detta låter oss lägga till flera avlyssnare, som kommer att exekveras i den ordning de tillhandahålls. Du behöver komma ihåg att ordningen på Interceptors spelar roll, detta eftersom varje efterföljande avlyssnaren mottar begäran från den föregående, så eventuella ändringar som görs av den föregående avlyssnaren kommer att vara synlig för den nästa.

Hur fungerar databindning i Angular-komponenter som använder @Input() och @Output()?

Data Binding är en nyckelaspekt av programmering i Angular. Det gör det möjligt att dynamiskt överföra data mellan komponenter. Data Binding inkluderar två tekniker: @Input och @Output.

@Input möjliggör överföring av värden från föräldrakomponenten till barnkomponenten. Detta är en så kallad enkelriktad databindingsteknik - data flyter från toppen till botten av komponenthierarkin. Vi använder den för att markera variabler som är tänkta att vara synliga för föräldrakomponenter.

Exempel på att använda @Input:

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

// parent.component.ts
parentMessage = "Hej från förälder";

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

I ovanstående exempel skickas `parentMessage` från parent.component.ts till `childMessage` i child.component.ts.

@Output å andra sidan, gör det möjligt att kommunicera i motsatt riktning - från barnkomponenten till föräldern. Detta är den så kallade händelsebindingsmetoden. Genom att använda @Output()-dekoreraren kan vi utlösa en händelse i barnkomponenten och hantera den i föräldrakomponenten.

Exempel på att använda @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>();

I det här fallet, när `messageEvent` utlöses i child.component.ts, kallas funktionen `receiveMessage` i parent.component.ts och får det värde som skickats av `messageEvent`.

Vad är NgModel och hur används det i Angular-formulär?

NgModel är en Angular-direktiv som används för att skapa tvåvägs databindning i formulär. Tvåvägsdatabindning innebär att data kan överföras från modellen till vyn och från vyn till modellen. I praktiken innebär detta att ändringar som användaren gör i formulärfälten återspeglas i datamodellen och ändringar i datamodellen syns i formuläret.

Användning av NgModel-direktivet i formulär är ganska enkelt. Vi placerar det i det lämpliga formulärelementet och binder det till det lämpliga modellfältet med [(ngModel)]-syntaxet.

Exempelvis:

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

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

Där "person.name" och "person.age" är datamodellfält som binds till de motsvarande formulärfälten. Alla ändringar som användaren gör i dessa formulärfält kommer automatiskt att återspeglas i "person"-modellen.

Kom ihåg, för att använda NgModel-direktivet är det nödvändigt att importera FormsModule i applikationsmodulen.

Vad är Zone.js i Angular och hur påverkar det applikationsprestandan?

Zone.js är ett bibliotek som tillåter spårning av asynkrona operationer i JavaScript. I sammanhanget av Angular är Zone.js en nyckelkomponent i ändringsdetekteringsmekanismen.

Zone.js introducerar begreppet "zoner", vilka är globala exekveringskontexter. Dessa "zoner" skapar ett "träd", där varje asynkron operation alltid sker i samma zon som initierade operationen. Som ett resultat kan vi spåra när en operation startar och när den slutar.

Exempel:
Den första operationen kan utlösa en setTimeout, varvid nästa operation planeras för nästa omgång av händelseloopen. Även om dessa är två skilda operationer tillåter Zone.js oss att spåra dem som en helhet - detta är asynkron spårning.

I Angular används Zone.js för att informera ramverket om när man ska börja ändringsdetektering. Varje användaråtgärd, timer eller http-begäran utförs i "angular zonen". När operationer i "angular zonen" är klara utlöser Angular automatiskt ändringsdetektering.

Med denna mekanism vet Angular när det är meningsfullt att uppdatera vyn. Det är därför Zone.js är avgörande för prestanda. Utan Zone.js skulle Angular behöva använda tekniker som polling för att ta reda på när man ska utlösa ändringsdetektering, vilket skulle vara mycket ineffektivt.

Även om Zone.js har positiva effekter på Angulars prestanda, kan det också ha en negativ inverkan. Om en applikation genomför en stor mängd asynkrona operationer som inte påverkar applikationens tillstånd, utlöser Angular fortfarande ändringsdetektering. Vid ett stort antal operationer kan detta försämra prestandan. För att förhindra detta kan vi utföra dessa operationer utanför "angular zonen".

Angular Flashcards

Exempel på Angular Flashcards från vår app

Beskriv hur du använder HTTP Interceptors i Angular för att hantera förfrågningar och svar.

Hur fungerar databindning i Angular-komponenter som använder @Input() och @Output()?

Vad är NgModel och hur används det i Angular-formulär?

Vad är Zone.js i Angular och hur påverkar det applikationsprestandan?

Ladda ner IT Flashcards Nu