Trên thực tế, các thành phần cũng là chỉ thị, nhưng có sự khác biệt giữa chúng.
Chỉ thị thuộc tính :
Các chỉ thị thuộc tính là các lớp có thể sửa đổi hành vi hoặc giao diện của một phần tử duy nhất. Để tạo một chỉ thị thuộc tính, hãy áp dụng @Directivecho một lớp.
import { Directive, ElementRef } from "@angular/core";
@Directive({
selector: "[custom-attr]", })
export class CustomAttrDirective {
constructor(element: ElementRef) {
element.nativeElement.classList.add("bg-success", "text-white");
}
}
Thêm thuộc tính chỉ thị template.html Tệp
<tr *ngFor="let item of getProducts(); let i = index" custom-attr>
<td>{{i + 1}}</td>
<td>{{item.name}}</td>
</tr>
Chỉ thị về cấu trúc :
Các chỉ thị cấu trúc thay đổi bố cục của tài liệu HTML bằng cách thêm và xóa các phần tử, dưới dạng vi mẫu. Các chỉ thị cấu trúc cho phép nội dung được thêm vào có điều kiện dựa trên kết quả của một biểu thức chẳng hạn như *ngIfhoặc cho cùng một nội dung được lặp lại cho từng đối tượng trong nguồn dữ liệu chẳng hạn *ngFor.
Bạn có thể sử dụng các chỉ thị tích hợp sẵn cho các tác vụ thông thường, nhưng việc viết các chỉ thị cấu trúc tùy chỉnh cung cấp khả năng điều chỉnh hành vi cho ứng dụng của bạn.
<p *ngIf="true">
Expression is true and ngIf is true.
This paragraph is in the DOM.
</p>
<p *ngIf="false">
Expression is false and ngIf is false.
This paragraph is not in the DOM.
</p>
Thành phần :
Các thành phần là các chỉ thị mà các mẫu của riêng chúng, thay vì dựa vào nội dung được cung cấp từ nơi khác. Các thành phần có quyền truy cập vào tất cả các tính năng chỉ thị, vẫn có một phần tử chủ, vẫn có thể xác định các thuộc tính đầu vào và đầu ra, v.v. Nhưng chúng cũng xác định nội dung của riêng mình.
Có thể dễ dàng đánh giá thấp tầm quan trọng của mẫu, nhưng các chỉ thị thuộc tính và cấu trúc có những hạn chế. Các chỉ thị có thể thực hiện công việc hữu ích và mạnh mẽ, nhưng chúng không có nhiều thông tin chi tiết về các yếu tố mà chúng được áp dụng. Các chỉ thị hữu ích nhất khi chúng là các công cụ có mục đích chung, chẳng hạn như ngModelchỉ thị, có thể được áp dụng cho bất kỳ thuộc tính mô hình dữ liệu nào và bất kỳ phần tử biểu mẫu nào, bất kể dữ liệu hoặc phần tử đang được sử dụng để làm gì.
Ngược lại, các thành phần được gắn chặt với nội dung của các mẫu của chúng. Các thành phần cung cấp dữ liệu và logic sẽ được sử dụng bởi các liên kết dữ liệu được áp dụng cho các phần tử HTML trong mẫu, cung cấp ngữ cảnh được sử dụng để đánh giá các biểu thức liên kết dữ liệu và hoạt động như chất kết dính giữa các lệnh và phần còn lại của ứng dụng. Các thành phần cũng là một công cụ hữu ích trong việc cho phép các dự án Angular lớn được chia thành các phần có thể quản lý được.
import { Component, Input } from '@angular/core';
import { Hero } from './hero';
@Component({
selector: 'app-hero-child',
template: `
<h3>{{hero.name}} says:</h3>
<p>I, {{hero.name}}, am at your service, {{masterName}}.</p>
`
})
export class HeroChildComponent {
@Input() hero: Hero;
@Input('master') masterName: string;
}
từ góc chính thức
từ sách Pro-Angular