Câu 1. Mục đích của trình trang trí ViewChild trong lớp thành phần này là gì?

@Component({
    ...
    template: '<p #bio></p>'
})
export class UserDetailsComponent {
    @ViewChild('bio') bio;
}

• Nó cung cấp quyền truy cập từ bên trong lớp thành phần đến đối tượng ElementRef cho thẻ <p> có biến tham chiếu mẫu trong tầm nhìn mẫu của thành phần.
• Nó chỉ ra rằng thẻ <p> được hiển thị như một phần tử con của tầm nhìn cha sử dụng thành phần này.
• Nó làm cho thẻ <p> trong mẫu hỗ trợ chiếu nội dung.
• Nó làm cho thẻ <p> hiển thị trong kết quả cuối cùng. Nếu #bio được sử dụng trong mẫu và @ViewChild không được sử dụng trong lớp, thì Angular sẽ tự động ẩn thẻ <p> có #bio trên đó.

DigitalOcean - truy cập thành phần viewchild

Câu 2. Phương thức nào được sử dụng để kết nối một FormControl với một phần tử DOM nguyên thuỷ trong các hình thức phản ứng?

• Thêm tên chuỗi được cung cấp cho FormControl vào thuộc tính được đặt tên controls trên phần tử <form> để chỉ định các trường nó nên bao gồm.
• Sử dụng cú pháp ràng buộc dấu ngoặc vuông xung quanh thuộc tính giá trị trên phần tử DOM và đặt giá trị đó bằng một phiên bản của FormControl.
• Sử dụng chỉ thị formControlName và đặt giá trị bằng tên chuỗi được cung cấp cho FormControl.
• Sử dụng tên chuỗi được cung cấp cho FormControl làm giá trị cho thuộc tính id của phần tử DOM.

Angular.io - Nhóm biểu mẫu phản ứng

Câu 3. Sự khác biệt giữa paramMap và queryParamMap trên lớp ActivatedRoute là gì?

• paramMap là một đối tượng chữ của các tham số trong đường dẫn URL của một tuyến đường. queryParamMap là một Observable của các tham số tương tự đó.
• paramMap là một Observable chứa các giá trị tham số là một phần của đường dẫn URL của một tuyến đường. queryParamMap là một phương thức nhận vào một mảng các khóa và được sử dụng để tìm các tham số cụ thể trong paramMap.
• paramMap là tên cũ từ Angular 3. Tên mới là queryParamMap.
• Cả hai đều là Observables chứa các giá trị từ chuỗi URL của tuyến đường được yêu cầu. paramMap chứa các giá trị tham số có trong đường dẫn URL và queryParamMap chứa các tham số truy vấn URL.

StackOverflow

Câu 4. Dựa trên việc sử dụng ống async dưới đây, và giả sử trường lớp users là một Observable, có bao nhiêu đăng ký đối với Observable users được thực hiện?

<h2>Names</h2>
<div *ngFor="let user of users | async">{{ user.name }}</div>
<h2>Ages</h2>
<div *ngFor="let user of users | async">{{ user.age }}</div>
<h2>Genders</h2>
<div *ngFor="let user of users | async">{{ user.gender }}</div>

• Không có. Ong async không tự động đăng ký.
• Không có. Cú pháp mẫu không đúng.
• Ba. Có một cho mỗi ống async.
• Một. Ống async lưu trữ Observables theo loại bên trong một cách nội bộ.

UltimateCourses

Câu 5. Làm thế nào bạn có thể sử dụng HttpClient để gửi yêu cầu POST đến một điểm cuối từ bên trong một chức năng addOrder trong dịch vụ Đơn hàng này?

export class OrderService {
  constructor(private httpClient: HttpClient) {}

  addOrder(order: Order) {
    // Missing line
  }
}

• this.httpClient.url(this.orderUrl).post(order);
• this.httpClient.send(this.orderUrl, order);
• this.httpClient.post<Order>(this.orderUrl, order);
• this.httpClient.post<Order>(this.orderUrl, order).subscribe();

Angular.io - Gửi dữ liệu đến máy chủ

Câu 6. RouterModule.forRoot phương thức được sử dụng để làm gì?

• Đăng ký bất kỳ nhà cung cấp nào bạn dự định sử dụng trong các thành phần được định tuyến.
• Đăng ký các định nghĩa tuyến đường tại cấp ứng dụng gốc.
• Chỉ ra rằng Angular nên cổ vũ cho các tuyến đường của bạn để thành công.
• Khai báo rằng bạn dự định sử dụng định tuyến chỉ ở cấp gốc.

O'REILLY

Câu 7. Các phần tử DOM nào sẽ phù hợp với lựa chọn siêu dữ liệu thành phần này?

@Component({
    selector: 'app-user-card',
    . . .
})

• Bất kỳ phần tử nào có thuộc tính app-user-card, chẳng hạn như <div app-user-card></div>.
• Lần xuất hiện đầu tiên của <app-user-card></app-user-card>.
• Tất cả các lần xuất hiện của <app-user-card></app-user-card>.
• Tất cả các lần xuất hiện của <user-card></user-card>.

Angular.io - Thông tin siêu dữ liệu thành phần

Câu 8. Cú pháp mẫu chính xác để sử dụng chỉ thị cấu trúc ngFor tích hợp sẵn để hiển thị một danh sách các tên sản phẩm là gì?

• %OPTION% A

  <ul>
    <li [ngFor]="let productName of productNames">{{ productName }}</li>
  </ul>
  

• %OPTION% B

  <ul>
    <li ngFor="let productName of productNames">{{ productName }}</li>
  </ul>
  

• %OPTION% C

  <ul>
    <li *ngFor="let productName of productNames">{{ productName }}</li>
  </ul>
  

• %OPTION% D

  <ul>
    <? for productName in productNames { ?>
    <li>{{ productName }}</li>
    <? } ?>
  </ul>
  

Angular.io- Các chỉ thị cấu trúc

Câu 9. Hai thuộc tính siêu dữ liệu trang trí thành phần được sử dụng để thiết lập các kiểu CSS cho một thành phần là gì?

• viewEncapsulation và viewEncapsulationFiles.
• Chỉ có một và đó là thuộc tính có tên css.
• css và cssUrl.
• styles và styleUrls.

Angular.io - Các kiểu thành phần

Câu 10. Với lớp thành phần sau đây, cú pháp mẫu nào bạn sẽ sử dụng trong mẫu để hiển thị giá trị của trường lớp title?

@Component({
  selector: 'app-title-card',
  template: '',
})
class TitleCardComponent {
  title = 'User Data';
}

• {{ 'title' }}
• {{ title }}
• [title]
• Một trường lớp không thể được hiển thị trong một mẫu thông qua cú pháp mẫu.

Angular.io - Nội suy chuỗi hoặc nội suy văn bản

Câu 11. Mục đích của phương thức valueChanges trên một FormControl là gì?

• Nó được sử dụng để cấu hình những giá trị nào được cho phép cho điều khiển.
• Nó được sử dụng để thay đổi giá trị của một điều khiển thành một giá trị mới. Bạn sẽ gọi phương thức đó và truyền giá trị mới cho trường biểu mẫu. Nó thậm chí hỗ trợ việc truyền một mảng các giá trị có thể được đặt qua thời gian.
• Nó trả về một Boolean dựa trên việc giá trị của điều khiển có khác so với giá trị mà nó được khởi tạo.
• Đó là một quan sát phát ra mỗi khi giá trị của điều khiển thay đổi, vì vậy bạn có thể phản ứng với các giá trị mới và đưa ra quyết định logic vào thời điểm đó.

Angular.io - Hiển thị giá trị điều khiển biểu mẫu

Câu 12. Chỉ thị nào được sử dụng để liên kết một thẻ <a> với định tuyến?

• routeTo
• routerLink
• routePath
• appLink

Angular.io - RouterLink

Câu 13. Đối trái của đối trái Output được sử dụng trong lớp thành phần này để làm gì?

@Component({
    selector: 'app-shopping-cart',
    . . .
})
export class ShoppingCartComponent {
    @Output() itemTotalChanged = new EventEmitter();
}

• Nó làm cho trường lớp itemTotalChanged trở thành công khai.
• Nó cung cấp một cách để ràng buộc giá trị với trường lớp itemTotalChanged, như vậy: <app-shopping-cart [itemTotalChanged]="newTotal"></app-shopping-cart>.
• Nó cung cấp một cách để ràng buộc sự kiện với trường lớp itemTotalChanged, như vậy: <app-shopping-cart (itemTotalChanged)="logNewTotal($event)"></app-shopping-cart>.
• Đơn giản là một cách để đặt một chú thích trước một trường lớp để có tài liệu.

Angular.io - Gửi dữ liệu cho thành phần cha

Câu 14. Sự khác biệt giữa hai ví dụ đánh giá điều kiện này để xử lý hiển thị một cách có điều kiện là gì?

<div *ngIf="isVisible">Active</div>
<div [hidden]="!isVisible">Active</div>

• ngIf là viết tắt cho ví dụ khác. Khi Angular xử lý chỉ thị đó, nó sẽ viết một phần tử div vào DOM với thuộc tính ẩn.
• Chúng về cơ bản là giống nhau.
• Chỉ thị ngIf không hiển thị div trong DOM nếu biểu thức là sai. Việc sử dụng thuộc tính hidden ẩn nội dung div trong khung nhìn trình duyệt, nhưng div vẫn có trong DOM.
• ngIf là hợp lệ, nhưng việc sử dụng thuộc tính hidden là không đúng và sẽ gây ra lỗi.

StackOverflow

Câu 15. Làm thế nào để vô hiệu hóa nút gửi khi biểu mẫu có lỗi trong ví dụ hình thức được điều khiển bằng mẫu này?

<form #userForm="ngForm">
  <input type="text" ngModel name="firstName" required />
  <input type="text" ngModel name="lastName" required />
  <button (click)="submit(userForm.value)">Save</button>
</form>

• %OPTION% A

  <button (click)="submit(userForm.value)" disable="userForm.invalid">Save</button>
  

• %OPTION% B

  <button (click)="submit(userForm.value)" [disabled]="userForm.invalid">Save</button>
  

• %OPTION% C

  <button (click)="submit(userForm.value)" [ngForm.disabled]="userForm.valid">Save</button>
  

• %OPTION% D

  <button (click)="submit(userForm.value)" *ngIf="userForm.valid">Save</button>
  

Angular.io - Gửi biểu mẫu với ngSubmit

Câu 16. Bạn muốn xem các tệp sẽ được tạo ra bằng cách tạo một thành phần thẻ liên hệ mới. Bạn sẽ sử dụng lệnh nào?

• ng generate component contact-card --dry-run
• ng generate component contact-card --no-files
• ng generate component component --dry
• ng generate component --exclude

Angular.io - Các tùy chọn ng generate

Câu 17. Dựa trên thành phần sau đây, cú pháp mẫu nào bạn sẽ sử dụng để ràng buộc trường titleText của TitleCardComponent với thuộc tính tiêu đề của phần tử h1?

@Component({
  selector: 'app-title-card',
  template: '<h1 title="User Data"> {{titleText}}</h1>',
})
export class TitleCardComponent {
  titleText = 'User Data';
}

• <h1 data-title="titleText">{{ titleText }}</h1>
• <h1 title="titleText">{{ titleText }}</h1>
• <h1 [title]="titleText">{{ titleText }}</h1>
• <h1 titleText>{{ titleText }}</h1>

Angular.io - Nội suy chuỗi

Câu 18. Hook vòng đời Angular là gì?

• Các bộ ghi nhật ký để theo dõi sức khỏe của một ứng dụng Angular
• Nhà cung cấp có thể được sử dụng để theo dõi các phiên bản của các thành phần
• Các ống đúc tích hợp sẵn có thể được sử dụng trong các mẫu cho các sự kiện DOM
• Các phương thức được đặt tên dành riêng cho các thành phần và chỉ thị mà Angular sẽ gọi trong các thời điểm được cài đặt, và có thể được sử dụng để kết nối với những khoảnh khắc trong vòng đời đó

Angular.io - Hook vòng đời

Câu 19. Chọn mô tả tốt nhất cho mã cú pháp mẫu này:

<span>Boss: {{job?.bossName}} </span>

• Dấu ? là viết tắt cho ống async. Giá trị công việc phải là một Observable.
• Nó đang sử dụng toán tử điều hướng an toàn (?) trên trường công việc. Nếu trường công việc không xác định, việc truy cập vào tên sếp sẽ bị bỏ qua và không xảy ra lỗi.
• Có một lỗi trong cú pháp mẫu. Dấu ? không hợp lệ ở đây.
• Nó hiển thị giá trị công việc nếu có; nếu không, nó hiển thị tên sếp.

StackOverflow

Câu 20. Bạn sẽ cấu hình một định nghĩa tuyến đường cho một UserDetailComponent hỗ trợ đường dẫn URL user/23 (trong đó 23 đại diện cho id của người dùng được yêu cầu). Bạn sẽ sử dụng cấu hình nào?

• { path: 'user/:id', component: UserDetailComponent }
• { url: 'user/:id', routedComponent: UserDetailComponent }
• { routedPath: 'user/:id', component: UserDetailComponent }
• { destination: new UserDetailComponent(), route: 'user/:id' }

CodeCraft - Các tuyến đường tham số hóa