Thẻ học Angular mẫu từ ứng dụng của chúng tôi

Tải xuống ứng dụng của chúng tôi từ App Store hoặc Google Play để nhận thêm flashcard miễn phí hoặc đăng ký để truy cập vào tất cả flashcard.

Mô tả cách sử dụng HTTP Interceptors trong Angular để quản lý yêu cầu và phản hồi.

HTTP Interceptor trong Angular được sử dụng để thao tác các yêu cầu và phản hồi HTTP. Chúng có thể chặn một yêu cầu, chỉnh sửa nó và chuyển nó đi. Chúng cũng có thể chặn một phản hồi, chỉnh sửa nó và chuyển nó đi. Để sử dụng HTTP Interceptor, chúng ta cần tạo một dịch vụ thực hiện giao diện HttpInterceptor.

Dưới đây là đoạn mã minh họa cách thêm bộ chặn vào ứng dụng:

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

    // Tại đây chúng ta chỉnh sửa yêu cầu
    const modifiedReq = req.clone({
      headers: req.headers.set('Authorization', 'My value'),
    });

    // Tại đây chúng ta chuyển yêu cầu đi
    return next.handle(modifiedReq);

  }

}

Một khi Interceptor của chúng ta đã được định nghĩa, chúng ta cần thêm nó vào mảng các nhà cung cấp trong module ứng dụng:

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

Lưu ý rằng 'multi' được đặt thành true. Điều này cho phép chúng ta thêm nhiều bộ chặn, sẽ được thực thi theo thứ tự mà chúng được cung cấp. Bạn cần nhớ rằng thứ tự của các Interceptors là quan trọng, vì mỗi bộ chặn tiếp theo nhận yêu cầu từ bộ chặn trước đó, vì vậy bất kỳ sửa đổi nào được thực hiện bởi bộ chặn trước đó sẽ được bộ chặn tiếp theo thấy.

Ràng buộc dữ liệu hoạt động như thế nào trong các thành phần Angular sử dụng @Input() và @Output()?

Ràng buộc dữ liệu là một khía cạnh quan trọng của việc lập trình trong Angular. Điều này giúp có thể chuyển dữ liệu một cách động giữa các thành phần. Ràng buộc dữ liệu bao gồm hai kỹ thuật: @Input và @Output.

@Input cho phép chuyển giá trị từ thành phần cha tới thành phần con. Đây là kỹ thuật ràng buộc dữ liệu một chiều - dữ liệu chảy từ trên xuống dưới trong hệ thống thành phần. Chúng tôi sử dụng nó để đánh dấu các biến nên hiển thị cho thành phần cha.

Ví dụ về việc sử dụng @Input:

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

// parent.component.ts
parentMessage = "Xin chào từ cha";

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

Trong ví dụ trên, `parentMessage` từ parent.component.ts được chuyển tới `childMessage` trong child.component.ts.

@Output, ngược lại, cho phép giao tiếp theo hướng ngược lại - từ thành phần con tới thành phần cha. Đây là kỹ thuật ràng buộc sự kiện. Sử dụng trình trang trí @Output(), chúng tôi có thể kích hoạt một sự kiện trong thành phần con và xử lý nó trong thành phần cha.

Ví dụ về việc sử dụng @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>();

Trong trường hợp này, khi `messageEvent` được kích hoạt trong child.component.ts, chức năng `receiveMessage` được gọi trong parent.component.ts và nhận giá trị đã được gửi bởi `messageEvent`.

NgModel là gì và nó được sử dụng như thế nào trong các biểu mẫu Angular?

NgModel là một chỉ thị Angular được sử dụng để tạo liên kết dữ liệu hai chiều trong biểu mẫu. Liên kết dữ liệu hai chiều nghĩa là dữ liệu có thể được truyền từ mô hình đến chế độ xem, và từ chế độ xem đến mô hình. Trên thực tế, điều này có nghĩa là những thay đổi do người dùng thực hiện trong các trường biểu mẫu được phản ánh trong mô hình dữ liệu, và những thay đổi dữ liệu mô hình sẽ hiển thị trong biểu mẫu.

Việc sử dụng chỉ thị NgModel trong biểu mẫu khá đơn giản. Chúng tôi đặt nó trong phần tử biểu mẫu phù hợp và liên kết nó với trường mô hình phù hợp bằng cách sử dụng cú pháp [(ngModel)].

Ví dụ:

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

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

Ở đây, "person.name" và "person.age" là các trường mô hình dữ liệu được liên kết với các trường biểu mẫu tương ứng. Bất kỳ thay đổi nào do người dùng thực hiện trong các trường biểu mẫu này sẽ tự động được phản ánh trong mô hình "person".

Nhớ rằng, để sử dụng chỉ thị NgModel, bạn cần phải nhập FormsModule vào mô-đun ứng dụng.

Zone.js trong Angular là gì và nó ảnh hưởng như thế nào đến hiệu suất ứng dụng?

Zone.js là một thư viện cho phép theo dõi các hoạt động bất đồng bộ trong JavaScript. Trong ngữ cảnh của Angular, Zone.js là một thành phần quan trọng của cơ chế phát hiện thay đổi.

Zone.js giới thiệu khái niệm "zones", đó là các ngữ cảnh thực thi toàn cầu. Những "zones" này tạo ra một "cây", nơi mỗi hoạt động bất đồng bộ luôn xảy ra trong cùng một zone đã khởi tạo hoạt động. Do đó, chúng ta có thể theo dõi khi nào một hoạt động bắt đầu và khi nào nó kết thúc.

Ví dụ:
Hoạt động đầu tiên có thể kích hoạt một setTimeout, trong đó hoạt động tiếp theo được lên lịch cho vòng lặp sự kiện tiếp theo. Mặc dù đây là hai hoạt động riêng biệt, Zone.js cho phép chúng tôi theo dõi chúng như một toàn thể - đây là theo dõi bất đồng bộ.

Trong Angular, Zone.js được sử dụng để thông báo cho framework khi nào bắt đầu phát hiện thay đổi. Mọi hành động của người dùng, hẹn giờ, hoặc yêu cầu http được thực hiện trong "zone" của Angular. Khi các hoạt động trong "zone" của Angular kết thúc, Angular tự động kích hoạt phát hiện thay đổi.

Với cơ chế này, Angular biết khi nào có ý nghĩa để làm mới lại view. Đó là lý do tại sao Zone.js quan trọng cho hiệu suất. Không có Zone.js, Angular sẽ phải sử dụng các kỹ thuật như polling để tìm ra khi nào kích hoạt phát hiện thay đổi, điều này sẽ không hiệu quả.

Mặc dù Zone.js mang lại hiệu quả tích cực cho hiệu suất của Angular, nó cũng có thể gây ra tác động tiêu cực. Nếu một ứng dụng thực hiện rất nhiều hoạt động bất đồng bộ không ảnh hưởng đến trạng thái của ứng dụng, Angular vẫn kích hoạt phát hiện thay đổi. Trong trường hợp số lượng lớn hoạt động, điều này có thể gây ảnh hưởng đến hiệu suất. Để ngăn chặn điều này, chúng ta có thể thực hiện những hoạt động này bên ngoài "zone" của Angular.

Thẻ học Angular