Angular 2 tại sao lại có dấu hoa thị (*)

Trong tài liệu góc 2, * và mẫu , chúng ta biết rằng * ngIf, * ngSwitch, * ngFor có thể được mở rộng thành thẻ ng-template. Câu hỏi của tôi là:

Tôi nghĩ rằng cái ngIfhoặc ngForkhông *cũng có thể được dịch và mở rộng thành thẻ mẫu bằng công cụ góc cạnh.

Đoạn mã sau

<hero-detail *ngIf="currentHero" [hero]="currentHero"></hero-detail>

sẽ giống như

<ng-template [ngIf]="currentHero">
  <hero-detail [hero]="currentHero"></hero-detail>
</ng-template>

Vậy tại sao phải thiết kế một biểu tượng lạ dấu hoa thị ( *) trong góc 2?

Cú pháp dấu hoa thị là một đường tổng hợp cho cú pháp mẫu dài dòng hơn mà chỉ thị mở rộng đến bên dưới, bạn có thể tự do sử dụng bất kỳ tùy chọn nào trong số này.

Trích dẫn từ tài liệu :

Dấu hoa thị là "đường cú pháp". Nó đơn giản hóa ngIf và ngFor cho cả người viết và người đọc. Dưới mui xe, Angular thay thế phiên bản dấu hoa thị bằng một hình thức dài dòng hơn.

Hai ví dụ tiếp theo nếu hiệu quả là giống nhau và chúng ta có thể viết theo một trong hai kiểu:

<!-- Examples (A) and (B) are the same -->

<!-- (A) *ngIf paragraph -->
<p *ngIf="condition">
  Our heroes are true!
</p>

<!-- (B) [ngIf] with template -->
<template [ngIf]="condition">
  <p>
    Our heroes are true!
  </p>
</template>

Angular2 cung cấp một loại chỉ thị đặc biệt - Chỉ thị cấu trúc

Các chỉ thị cấu trúc dựa trên <template>thẻ.

Các *trước thuộc tính chọn cho thấy một chỉ thị cấu trúc nên được áp dụng thay vì một chỉ thị thuộc tính bình thường hoặc ràng buộc tài sản. Angular2 mở rộng nội bộ cú pháp thành một <template>thẻ rõ ràng .

Vì cuối cùng cũng có <ng-container>phần tử có thể được sử dụng tương tự như <template>thẻ nhưng hỗ trợ cú pháp viết tắt phổ biến hơn. Đây là ví dụ bắt buộc khi hai chỉ thị cấu trúc nên được áp dụng cho một phần tử duy nhất, phần tử này không phải là supportd.

<ng-container *ngIf="boolValue">
  <div *ngFor="let x of y"></div>
</ng-container>

Angular xử lý các phần tử mẫu theo một cách đặc biệt. Các *cú pháp là một phím tắt cho phép bạn làm mất hiệu lực văn bản cho toàn bộ <template>phần tử. Hãy để tôi chỉ cho bạn cách nó hoạt động.

Sử dụng cái này

*ngFor="let t of todos; let i=index"

khử đường thành

template="ngFor: let t of todos; let i=index" 

loại bỏ đường thành

<template ngFor [ngForOf]="todos" .... ></template>

cũng như các chỉ thị Cấu trúc của angle như ngFor, ngIf, v.v. được đặt trước *chỉ để phân biệt với các thành phần và chỉ thị tùy chỉnh này

xem thêm tại đây

https://vsavkin.com/angular-2-template-syntax-5f2ee9f13c6a#.rcffirs7a

Từ tài liệu Angular :

Các chỉ thị cấu trúc chịu trách nhiệm về bố cục HTML. Chúng định hình hoặc định hình lại cấu trúc của DOM, thường bằng cách thêm, xóa hoặc thao tác các phần tử.

Như với các chỉ thị khác, bạn áp dụng một chỉ thị cấu trúc cho một phần tử chủ . Sau đó, chỉ thị thực hiện bất cứ điều gì nó phải làm với phần tử máy chủ đó và con cháu của nó.

Chỉ thị cấu trúc rất dễ nhận ra. Dấu hoa thị (*) đứng trước tên thuộc tính chỉ thị như trong ví dụ này.

<p *ngIf="userInput">{{username}}</p>

Đôi khi bạn có thể cần <a *ngIf="cond">ví dụ, khi đó chỉ là một thẻ. đôi khi bạn có thể muốn đặt ngIf xung quanh nhiều thẻ mà không cần có thẻ thực làm trình bao bọc dẫn bạn đến việc <template [ngIf]="cond">gắn thẻ. Làm thế nào để angle có thể biết rằng nó có nên hiển thị chủ sở hữu chỉ thị ngIf trong html kết quả cuối cùng hay không? vì vậy nó không chỉ là làm cho mã rõ ràng hơn. đó là một sự khác biệt cần thiết.