[MUSIC]
Trong bài tập trước, chúng tôi đã thấy việc sử dụng chỉ thị cấu trúc đầu tiên của chúng tôi,
NGFor.
Hãy tự hỏi mình một vài câu hỏi nữa về các chỉ thị cấu trúc và
tìm hiểu cách chúng hữu ích khi chúng ta viết các ứng dụng Angular của chúng tôi.
Chỉ thị cấu trúc là một loại chỉ thị.
Vì vậy, chỉ thị là một ô chung mà theo đó bạn có các thành phần,
sau đó bạn có các chỉ thị cấu trúc, và sau đó bạn có các chỉ thị thuộc tính.
Vì vậy, chúng ta hãy tìm hiểu thêm một chút về các chỉ thị.
Vì vậy, những gì chúng tôi nhận ra là các mẫu Angular là năng động, vì vậy chúng cần phải được
tạo ra trên bay, sẽ có rất nhiều thao tác được thực hiện trên DOM.
Vì vậy, những gì các chỉ thị giúp chúng tôi là cho phép chúng tôi đưa ra hướng dẫn
cho Angular về làm thế nào để hiển thị các mẫu cho DOM.
Vì vậy, họ sử dụng các chỉ thị để đưa ra hướng dẫn cho
Angular khi nó đang hiển thị các mẫu trên màn hình.
Vì vậy, nói chung, một chỉ thị có thể được định nghĩa trực tiếp trong Angular bằng cách sử dụng
một class với @Directive decorator.
Chúng ta cũng thấy một ví dụ về một chỉ thị mà chúng ta có thể tự
tạo ra một chút sau đó trong khóa học này.
Hiện tại, chúng ta sẽ xem xét các chỉ thị xây dựng.
Và đặc biệt,
chúng tôi đã gặp phải loại chỉ thị đầu tiên của chúng tôi, đó là một thành phần.
Một thành phần là một loại đặc biệt của chỉ thị và
Angular, trong đó có mẫu riêng của nó liên kết với nó.
Và chúng ta đã thấy làm thế nào chúng ta có thể tận dụng một thành phần để xác định
các phần của bố trí của chúng tôi cho màn hình ứng dụng của chúng tôi.
Như tôi đã đề cập, có hai loại chỉ thị khác trong các chỉ thị Angular,
cấu trúc và thuộc tính.
Chúng ta sẽ nhanh chóng kiểm tra các chỉ thị cấu trúc trong bài học này.
Và sau đó chúng ta sẽ xem xét các chỉ thị thuộc tính một chút sau đó trong
khóa học này.
Vậy các chỉ thị cấu trúc là gì và chúng hữu ích như thế nào cho chúng ta?
Những gì chúng tôi nhận ra khi chúng tôi sử dụng các chỉ thị cấu trúc là,
chúng giúp chúng tôi thay đổi cách bố trí nội dung của chúng tôi
bằng cách giúp chúng tôi thêm và loại bỏ các yếu tố khỏi DOM.
Đặc biệt, lưu ý việc sử dụng thuật ngữ thêm và
loại bỏ và thay thế các phần tử trong DOM.
Vì vậy, bạn đang theo nghĩa đen sử dụng các chỉ thị cấu trúc để thao tác
DOM của trang web của bạn.
Vì vậy, bạn có thể sử dụng các chỉ thị cấu trúc bằng cách áp dụng chúng vào một phần tử máy chủ,
thường là một div hoặc một mục danh sách trong DOM và cũng cho các hậu duệ của nó.
Chúng ta đã thấy người dùng,
chỉ thị cấu trúc NGFor, trong bài tập trước đó.
Và chúng tôi đã thấy cách chúng tôi sử dụng NGFor để vòng qua một loạt các món ăn,
và sau đó bố trí mỗi món ăn để xây dựng thực đơn cho nhà hàng của chúng tôi.
Ở đây, tôi sẽ đề cập ngắn gọn một số chỉ thị cấu trúc chung mà bạn sẽ
gặp phải khi bạn viết phân vùng Angular của bạn.
Một trong những chỉ thị cấu trúc phổ biến nhất mà bạn sẽ thấy là
chỉ thị NGIf.
Khi bạn sử dụng nó trong cú pháp mẫu của bạn, bạn sẽ viết nó dưới dạng *ngIf,
vì vậy đây là cách chỉ thị này được sử dụng trong DOM của bạn.
Vì vậy, ví dụ, nếu bạn áp dụng chỉ thị NGIf cho một div như thế
này trong ví dụ này, những gì bạn đang chỉ định ở đâu là
nếu SelectedDish không phải là null thì div này sẽ được thêm vào DOM.
Nếu đó SelectedDish là null, sau đó div này,
bất cứ điều gì được chứa trong div này sẽ không được thêm vào DOM, vì vậy
bạn nghĩa đen loại bỏ điều này khỏi DOM nếu giá trị hóa ra là sai.
Nếu nó trở thành sự thật, sau đó nó được thêm vào bãi chứa.
Tương tự như vậy, chúng ta đã thấy việc sử dụng chỉ thị ngFor.
Vì vậy, nơi chúng tôi xác định, ví dụ, cho md-list-item trong
bài tập trước, chúng tôi đã nói *NGFor và nói, hãy để món ăn của các món ăn.
Vì vậy, điều này cho phép chúng tôi lặp lại các mảng của các món ăn
được xác định trong lớp kịch bản kiểu của chúng tôi.
Một chỉ thị cấu trúc khác có thể tìm thấy sử dụng phổ biến là chỉ thị NGSwitch.
Mặc dù tôi không có một ví dụ ngay bây giờ,
sau này trong khóa học này chúng ta sẽ gặp phải việc sử dụng chỉ thị NGSwitch.
Điều này cho phép bạn chọn lọc thêm các phần tử nhất định vào DOM
bằng cách xác định một điều kiện, tùy thuộc vào điều kiện đánh giá là gì,
sau đó bạn sẽ sử dụng một trong những phần tử đó trong danh sách.
Nếu bạn đã quen thuộc với câu lệnh switch từ C++ hoặc Java,
NGSwitch có vẻ rất quen thuộc với bạn.
Vì vậy, nó sẽ hoạt động tương tự như lệnh switch mà bạn
đang sử dụng để từ Java hoặc C++.
Với cuộc thảo luận ngắn về các chỉ thị cấu trúc, chúng
ta hãy chuyển sang bài tập tiếp theo, nơi chúng ta sẽ tiếp tục kiểm tra các thành phần.
[ NHẠC]