1
00:00:00,000 --> 00:00:04,518
[MUSIC]

2
00:00:04,518 --> 00:00:09,098
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,

3
00:00:09,098 --> 00:00:09,812
NGFor.

4
00:00:09,812 --> 00:00:15,186
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à

5
00:00:15,186 --> 00:00:19,970
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.

6
00:00:22,000 --> 00:00:26,110
Chỉ thị cấu trúc là một loại chỉ thị.

7
00:00:26,110 --> 00:00:30,628
Vì vậy, chỉ thị là một ô chung mà theo đó bạn có các thành phần,

8
00:00:30,628 --> 00:00:35,847
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.

9
00:00:35,847 --> 00:00:39,015
Vì vậy, chúng ta hãy tìm hiểu thêm một chút về các chỉ thị.

10
00:00:39,015 --> 00:00:43,121
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

11
00:00:43,121 --> 00:00:47,379
tạo ra trên bay, sẽ có rất nhiều thao tác được thực hiện trên DOM.

12
00:00:47,379 --> 00:00:52,721
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

13
00:00:52,721 --> 00:00:57,710
cho Angular về làm thế nào để hiển thị các mẫu cho DOM.

14
00:00:57,710 --> 00:01:00,900
Vì vậy, họ sử dụng các chỉ thị để đưa ra hướng dẫn cho

15
00:01:00,900 --> 00:01:04,880
Angular khi nó đang hiển thị các mẫu trên màn hình.

16
00:01:04,880 --> 00:01:10,120
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

17
00:01:10,120 --> 00:01:14,520
một class với @Directive decorator.

18
00:01:14,520 --> 00:01:19,044
Chúng ta cũng thấy một ví dụ về một chỉ thị mà chúng ta có thể tự

19
00:01:19,044 --> 00:01:22,630
tạo ra một chút sau đó trong khóa học này.

20
00:01:22,630 --> 00:01:25,258
Hiện tại, chúng ta sẽ xem xét các chỉ thị xây dựng.

21
00:01:25,258 --> 00:01:26,587
Và đặc biệt,

22
00:01:26,587 --> 00:01:32,650
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.

23
00:01:32,650 --> 00:01:35,060
Một thành phần là một loại đặc biệt của chỉ thị và

24
00:01:35,060 --> 00:01:39,800
Angular, trong đó có mẫu riêng của nó liên kết với nó.

25
00:01:39,800 --> 00:01:45,700
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

26
00:01:45,700 --> 00:01:50,420
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.

27
00:01:51,910 --> 00:01:57,610
Như tôi đã đề cập, có hai loại chỉ thị khác trong các chỉ thị Angular,

28
00:01:57,610 --> 00:02:00,465
cấu trúc và thuộc tính.

29
00:02:00,465 --> 00:02:05,138
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.

30
00:02:05,138 --> 00:02:09,359
Và sau đó chúng ta sẽ xem xét các chỉ thị thuộc tính một chút sau đó trong

31
00:02:09,359 --> 00:02:10,290
khóa học này.

32
00:02:11,400 --> 00:02:15,608
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?

33
00:02:15,608 --> 00:02:19,590
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à,

34
00:02:19,590 --> 00:02:24,910
chúng giúp chúng tôi thay đổi cách bố trí nội dung của chúng tôi

35
00:02:24,910 --> 00:02:30,020
bằng cách giúp chúng tôi thêm và loại bỏ các yếu tố khỏi DOM.

36
00:02:30,020 --> 00:02:33,800
Đặc biệt, lưu ý việc sử dụng thuật ngữ thêm và

37
00:02:33,800 --> 00:02:37,460
loại bỏ và thay thế các phần tử trong DOM.

38
00:02:37,460 --> 00:02:41,720
Vì vậy, bạn đang theo nghĩa đen sử dụng các chỉ thị cấu trúc để thao tác

39
00:02:41,720 --> 00:02:44,640
DOM của trang web của bạn.

40
00:02:44,640 --> 00:02:51,124
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ủ,

41
00:02:51,124 --> 00:02:56,738
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ó.

42
00:02:56,738 --> 00:02:59,435
Chúng ta đã thấy người dùng,

43
00:02:59,435 --> 00:03:04,840
chỉ thị cấu trúc NGFor, trong bài tập trước đó.

44
00:03:04,840 --> 00:03:11,650
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,

45
00:03:11,650 --> 00:03:17,020
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.

46
00:03:18,480 --> 00:03:22,870
Ở đây, tôi sẽ đề cập ngắn gọn một số chỉ thị cấu trúc chung mà bạn sẽ

47
00:03:22,870 --> 00:03:27,180
gặp phải khi bạn viết phân vùng Angular của bạn.

48
00:03:27,180 --> 00:03:31,520
Một trong những chỉ thị cấu trúc phổ biến nhất mà bạn sẽ thấy là

49
00:03:31,520 --> 00:03:32,620
chỉ thị NGIf.

50
00:03:32,620 --> 00:03:40,710
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,

51
00:03:40,710 --> 00:03:45,800
vì vậy đây là cách chỉ thị này được sử dụng trong DOM của bạn.

52
00:03:45,800 --> 00:03:50,973
Vì vậy, ví dụ, nếu bạn áp dụng chỉ thị NGIf cho một div như thế

53
00:03:50,973 --> 00:03:56,050
này trong ví dụ này, những gì bạn đang chỉ định ở đâu là

54
00:03:56,050 --> 00:04:01,845
nếu SelectedDish không phải là null thì div này sẽ được thêm vào DOM.

55
00:04:01,845 --> 00:04:05,287
Nếu đó SelectedDish là null, sau đó div này,

56
00:04:05,287 --> 00:04:10,053
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

57
00:04:10,053 --> 00:04:15,965
bạn nghĩa đen loại bỏ điều này khỏi DOM nếu giá trị hóa ra là sai.

58
00:04:15,965 --> 00:04:19,800
Nếu nó trở thành sự thật, sau đó nó được thêm vào bãi chứa.

59
00:04:19,800 --> 00:04:24,280
Tương tự như vậy, chúng ta đã thấy việc sử dụng chỉ thị ngFor.

60
00:04:24,280 --> 00:04:29,580
Vì vậy, nơi chúng tôi xác định, ví dụ, cho md-list-item trong

61
00:04:29,580 --> 00:04:35,470
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.

62
00:04:35,470 --> 00:04:40,750
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

63
00:04:40,750 --> 00:04:46,925
được xác định trong lớp kịch bản kiểu của chúng tôi.

64
00:04:46,925 --> 00:04:55,570
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.

65
00:04:55,570 --> 00:04:57,840
Mặc dù tôi không có một ví dụ ngay bây giờ,

66
00:04:57,840 --> 00:05:02,940
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.

67
00:05:02,940 --> 00:05:07,080
Đ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

68
00:05:07,080 --> 00:05:11,940
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ì,

69
00:05:11,940 --> 00:05:17,060
sau đó bạn sẽ sử dụng một trong những phần tử đó trong danh sách.

70
00:05:17,060 --> 00:05:21,858
Nếu bạn đã quen thuộc với câu lệnh switch từ C++ hoặc Java,

71
00:05:21,858 --> 00:05:25,250
NGSwitch có vẻ rất quen thuộc với bạn.

72
00:05:25,250 --> 00:05:29,710
Vì vậy, nó sẽ hoạt động tương tự như lệnh switch mà bạn

73
00:05:29,710 --> 00:05:32,295
đang sử dụng để từ Java hoặc C++.

74
00:05:32,295 --> 00:05:35,675
Với cuộc thảo luận ngắn về các chỉ thị cấu trúc, chúng

75
00:05:35,675 --> 00:05:40,748
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.

76
00:05:40,748 --> 00:05:47,459
[ NHẠC]