1
00:00:03,650 --> 00:00:10,075
Chúng tôi chỉ có một giới thiệu ngắn gọn về các chỉ thị thuộc tính trong bài giảng trước đó.

2
00:00:10,075 --> 00:00:16,440
Bây giờ chúng ta hãy xây dựng một chỉ thị thuộc tính tùy chỉnh cho ứng dụng góc cạnh

3
00:00:16,440 --> 00:00:23,025
của chúng tôi và sau đó tận dụng nó trong quan điểm của một số thành phần trong ứng dụng góc cạnh của chúng tôi.

4
00:00:23,025 --> 00:00:26,340
Trên đường đi, chúng ta sẽ tìm hiểu về cách chúng ta có thể tạo ra

5
00:00:26,340 --> 00:00:30,795
các chỉ thị tùy chỉnh và sử dụng chúng trong ứng dụng Angular của chúng tôi.

6
00:00:30,795 --> 00:00:36,275
Chúng tôi sẽ sử dụng Angular CLI để tạo ra các chỉ thị tùy chỉnh và sau đó,

7
00:00:36,275 --> 00:00:39,830
cập nhật nó để thực hiện các loại

8
00:00:39,830 --> 00:00:45,245
tính năng mà chúng tôi cần cung cấp bởi chỉ thị thuộc tính này.

9
00:00:45,245 --> 00:00:51,220
Theo giữ chỉ thị trong một thư mục riêng biệt có tên là Chỉ thị,

10
00:00:51,220 --> 00:00:52,700
trong thư mục ứng dụng của tôi.

11
00:00:52,700 --> 00:00:56,805
Vì vậy, hãy để tôi tạo một thư mục mới có tên Directives.

12
00:00:56,805 --> 00:01:02,820
Bây giờ, tôi sẽ tạo ra chỉ thị tùy chỉnh của tôi bên trong thư mục Directives này.

13
00:01:02,820 --> 00:01:07,170
Sẽ có sự giúp đỡ của CLI góc để tạo ra chỉ thị tùy chỉnh của chúng tôi.

14
00:01:07,170 --> 00:01:08,495
Vì vậy, tại dấu nhắc,

15
00:01:08,495 --> 00:01:20,400
gõ ng tạo ra hoặc g phát hiện/làm nổi bật.

16
00:01:20,780 --> 00:01:26,110
Vì vậy, chỉ thị đặc biệt này sẽ được gọi là chỉ thị nổi bật.

17
00:01:26,110 --> 00:01:28,790
Vì vậy, với điều này, chúng tôi sẽ tạo ra

18
00:01:28,790 --> 00:01:34,460
một chỉ thị mới được gọi là chỉ thị nổi bật và sau đó chúng tôi sẽ đi

19
00:01:34,460 --> 00:01:38,600
và chỉnh sửa mà làm nổi bật các tập tin chỉ thị

20
00:01:38,600 --> 00:01:43,175
đã được tạo ra để tạo ra chỉ thị tùy chỉnh của chúng tôi.

21
00:01:43,175 --> 00:01:46,895
Chính xác tôi đang cố gắng đạt được điều gì với chỉ thị này?

22
00:01:46,895 --> 00:01:52,910
Hãy để tôi đưa bạn đến chế độ xem menu trong ứng dụng Angular của chúng tôi.

23
00:01:52,910 --> 00:01:54,355
Trong chế độ xem trình đơn,

24
00:01:54,355 --> 00:01:58,420
khi tôi muốn chọn bất kỳ một trong những mục này hiện tại,

25
00:01:58,420 --> 00:02:01,495
tôi không có đầu mối chính xác tôi đang ở đâu.

26
00:02:01,495 --> 00:02:08,520
Bây giờ thay vào đó, khi chuột của tôi di chuột vào bất kỳ một trong những mục trong danh sách lưới của

27
00:02:08,520 --> 00:02:13,340
tôi, tôi muốn có thể làm nổi bật một số mục để chỉ ra rằng nếu

28
00:02:13,340 --> 00:02:15,870
tôi nhấp vào, tôi sẽ chọn mục cụ thể đó.

29
00:02:15,870 --> 00:02:19,220
Vì vậy, đó là những gì các chức năng mà tôi sẽ

30
00:02:19,220 --> 00:02:23,825
thiết kế bằng cách sử dụng chỉ thị nổi bật của tôi mà tôi vừa tạo ra.

31
00:02:23,825 --> 00:02:28,410
Để làm điều đó, hãy mở tập tin.t directive.t nổi bật.

32
00:02:28,410 --> 00:02:33,935
Vì vậy, bạn thấy rằng chúng tôi có giàn giáo trần xương có sẵn cho chỉ thị

33
00:02:33,935 --> 00:02:36,500
đã có ở đây và bạn sẽ thấy rằng chúng tôi

34
00:02:36,500 --> 00:02:39,845
đã nhập khẩu giám đốc từ mã Angular.

35
00:02:39,845 --> 00:02:45,230
Bây giờ để điều này, tôi sẽ thêm vào một vài nhập khẩu nữa.

36
00:02:45,230 --> 00:02:52,055
Vì vậy, chúng tôi sẽ nhập ElementRef và sau đó chúng tôi sẽ nhập Renderer2 đây.

37
00:02:52,055 --> 00:02:57,215
Bây giờ Renderer2 chỉ có sẵn với Angular bốn trở lên.

38
00:02:57,215 --> 00:02:59,710
Phiên bản trước của renderer được gọi là

39
00:02:59,710 --> 00:03:04,290
renderush và nó đã được nhân đôi bây giờ với Angular four.

40
00:03:04,290 --> 00:03:06,920
Renderer2 bây giờ là một thực hiện mới của

41
00:03:06,920 --> 00:03:11,030
renderer với sự hỗ trợ tốt hơn cho một số tính năng khác.

42
00:03:11,030 --> 00:03:18,045
Vì vậy, tôi sẽ áp dụng Renderer2 để tạo ra chỉ thị nổi bật.

43
00:03:18,045 --> 00:03:20,005
Bây giờ tại sao chúng ta sử dụng bộ kết xuất này?

44
00:03:20,005 --> 00:03:23,690
Bây giờ khi bạn tạo ra chỉ thị trong ứng dụng Angular của bạn,

45
00:03:23,690 --> 00:03:25,640
từ ứng dụng Angular của bạn chính nó,

46
00:03:25,640 --> 00:03:30,750
mặc dù tại thời điểm ứng dụng Angular của chúng tôi đang được trả lại chủ yếu trong trình duyệt,

47
00:03:30,750 --> 00:03:33,740
bạn có thể sử dụng cùng một giàn giáo mã cho

48
00:03:33,740 --> 00:03:37,420
ứng dụng Angular của bạn để tạo ra một ứng dụng cho mục đích khác.

49
00:03:37,420 --> 00:03:42,985
Trong khóa học bỏ qua bản địa mà chúng ta sẽ thấy sau này trong chuyên môn hóa này,

50
00:03:42,985 --> 00:03:50,385
chúng ta sẽ thấy một cách sử dụng khác của mã này để tạo các ứng dụng sử dụng NativeScript.

51
00:03:50,385 --> 00:03:54,470
Vì vậy, trong trường hợp đó việc kết xuất sẽ được thực hiện theo một cách khác,

52
00:03:54,470 --> 00:03:56,160
không phải vào một trình duyệt.

53
00:03:56,160 --> 00:04:00,455
Vì vậy, chúng ta cần phải sử dụng Renderer2 này,

54
00:04:00,455 --> 00:04:03,710
cho phép chúng ta tự động thích nghi với

55
00:04:03,710 --> 00:04:08,120
nền tảng thích hợp mà trên đó việc hiển thị quan điểm này đang được thực hiện.

56
00:04:08,120 --> 00:04:13,320
Vì vậy, đó là lý do tại sao tôi đang sử dụng các renderer ở đây.

57
00:04:13,660 --> 00:04:20,460
Ngoài ra, một điều nữa mà tôi muốn nhập là HostListener.

58
00:04:20,460 --> 00:04:24,650
HostListener sẽ nghe các chuyển động chuột từ màn hình

59
00:04:24,650 --> 00:04:28,755
và đáp ứng thích hợp trong những trường hợp đó.

60
00:04:28,755 --> 00:04:34,099
Chúng ta sẽ thấy việc sử dụng các chỉ thị này khi chúng ta tạo ra chỉ thị trong một vài phút.

61
00:04:34,099 --> 00:04:37,010
Vì vậy, bây giờ, rằng chúng tôi đã nhập khẩu những thứ mà chúng tôi cần,

62
00:04:37,010 --> 00:04:40,620
chúng tôi sẽ tiêm một vài thứ vào nhà xây dựng của chúng tôi.

63
00:04:40,620 --> 00:04:47,180
Vì vậy, trước tiên chúng ta sẽ sử dụng một el,

64
00:04:47,180 --> 00:04:52,625
đó là loại Elementref và

65
00:04:52,625 --> 00:04:59,569
cũng là thứ hai mà chúng ta sẽ sử dụng là renderer,

66
00:04:59,569 --> 00:05:04,265
đó là loại Renderer2.

67
00:05:04,265 --> 00:05:11,254
Bây giờ với điều này, những gì chúng ta sẽ làm là chúng ta sẽ sử dụng

68
00:05:11,254 --> 00:05:20,360
HostListener và sau đó họ sẽ chỉ ra rằng cho HostListener,

69
00:05:20,360 --> 00:05:28,094
khi sự kiện mouseenter xảy ra,

70
00:05:28,094 --> 00:05:38,340
sau đó chúng ta sẽ gọi phương pháp onmouseenter

71
00:05:38,340 --> 00:05:41,400
và trong phương pháp onmouseenter, chúng ta sẽ làm điều gì đó.

72
00:05:41,400 --> 00:05:43,790
Tương tự như vậy, tôi sẽ tạo một cái khác

73
00:05:43,790 --> 00:05:55,005
được gọi là HostListener và mouseleave.

74
00:05:55,005 --> 00:05:58,310
Vì vậy, khi chuột rời khỏi một khu vực cụ thể,

75
00:05:58,310 --> 00:06:02,790
sau đó bạn sẽ làm gì trên mouseleave?

76
00:06:02,950 --> 00:06:06,470
Chúng ta sẽ thực hiện một hoạt động khác.

77
00:06:06,470 --> 00:06:11,660
Vì vậy, những gì chúng ta sẽ làm là khi chuột vào một khu vực cụ thể, trong trường hợp này,

78
00:06:11,660 --> 00:06:15,710
chúng tôi đang sử dụng chỉ thị thuộc tính này để làm nổi bật

79
00:06:15,710 --> 00:06:22,130
mục cụ thể từ danh sách lưới của tôi mà chuột đã di chuột vào.

80
00:06:22,130 --> 00:06:24,935
Vì vậy, đó là mục đích để thực hiện những điều này

81
00:06:24,935 --> 00:06:28,050
và khi con trỏ chuột di chuột ra khỏi mục đó,

82
00:06:28,050 --> 00:06:29,580
điều đó sẽ không còn được đánh dấu.

83
00:06:29,580 --> 00:06:31,575
Vì vậy, đó là mục đích của chỉ thị này, chỉ

84
00:06:31,575 --> 00:06:33,850
thị nổi bật mà tôi đang tạo ra ở đây.

85
00:06:33,850 --> 00:06:40,715
Vì vậy, khi chuột đi vào một khu vực cụ thể.

86
00:06:40,715 --> 00:06:47,245
Vì vậy, tôi sẽ sử dụng các renderer và renderer cung cấp một phương pháp gọi là addClass.

87
00:06:47,245 --> 00:06:55,990
Vì vậy, phương pháp này sẽ được sử dụng để thêm một lớp vào mục lưới trong danh sách lưới của tôi.

88
00:06:55,990 --> 00:06:58,755
Vì vậy, lớp mà tôi sẽ thêm,

89
00:06:58,755 --> 00:07:08,160
cách nó được cấu hình sẽ nói này.el.NativeElement và

90
00:07:08,160 --> 00:07:12,260
tham số thứ hai là

91
00:07:12,260 --> 00:07:17,240
tên lớp mà bạn sẽ áp dụng khi bạn mạo hiểm vào khu vực đó.

92
00:07:17,240 --> 00:07:21,965
Vì vậy, chúng tôi sẽ áp dụng lớp tô sáng này cho phần tử đó khi

93
00:07:21,965 --> 00:07:27,425
con chuột của bạn di chuyển vào khu vực mà phần tử đó được hiển thị trong chế độ xem.

94
00:07:27,425 --> 00:07:34,765
Bây giờ, điều tương tự. Tôi sẽ làm một phương pháp khác khi con chuột rời khỏi,

95
00:07:34,765 --> 00:07:37,200
tôi sẽ loại bỏ lớp đó.

96
00:07:37,200 --> 00:07:41,275
Vì vậy, phương pháp RemoveCLASS cũng được hỗ trợ bởi Renderer2.

97
00:07:41,275 --> 00:07:42,530
Vì vậy, trong trường hợp này,

98
00:07:42,530 --> 00:07:44,780
khi chuột di chuyển vào vùng đó,

99
00:07:44,780 --> 00:07:49,270
lớp tô sáng này sẽ được thêm vào mục lưới đó.

100
00:07:49,270 --> 00:07:52,250
Khi chuột rời khỏi mục lưới cụ thể đó,

101
00:07:52,250 --> 00:07:54,890
lớp tô sáng sẽ bị loại bỏ khỏi các mục lưới.

102
00:07:54,890 --> 00:07:57,685
Vì vậy, đây là cách sử dụng chỉ thị thuộc tính này,

103
00:07:57,685 --> 00:08:00,540
Tôi đang thêm và loại bỏ các lớp học,

104
00:08:00,540 --> 00:08:06,840
lớp CSS để mục lưới của tôi trong trang GridView của tôi.

105
00:08:06,840 --> 00:08:12,070
Bây giờ, bước tiếp theo tất nhiên là để tạo ra lớp này được gọi là lớp nổi bật.

106
00:08:12,070 --> 00:08:16,535
Vì vậy, để làm điều đó, tôi sẽ đi vào

107
00:08:16,535 --> 00:08:21,495
tập tin styles.scss, nơi chúng tôi có các phong cách toàn cầu được lưu trữ ở đây.

108
00:08:21,495 --> 00:08:23,900
Vì vậy, trong tập tin styles.scss,

109
00:08:23,900 --> 00:08:32,385
tôi sẽ thêm vào lớp CSS nổi bật ở đó.

110
00:08:32,385 --> 00:08:37,340
Lớp CSS nổi bật tôi sẽ định nghĩa là màu nền.

111
00:08:37,340 --> 00:08:42,825
Tôi sẽ áp dụng nền nhợt nhạt,

112
00:08:42,825 --> 00:08:46,810
mà tôi đã xác định trước đó và sau đó,

113
00:08:46,810 --> 00:08:52,140
tôi sẽ áp dụng một biên giới của một điểm ảnh,

114
00:08:52,140 --> 00:08:55,780
biên giới rắn của màu sắc,

115
00:08:55,860 --> 00:09:04,595
tiểu học màu tối, mà tôi cũng đã định nghĩa trước đó

116
00:09:04,595 --> 00:09:13,335
như là một biến CSS và tôi cũng sẽ tăng z-index để một.

117
00:09:13,335 --> 00:09:18,750
Điều đó có nghĩa là vật phẩm đó sẽ được nâng lên trên những vật dụng còn lại trong đó.

118
00:09:18,750 --> 00:09:24,790
Tôi chắc chắn từ kiến thức của bạn về CSS bạn hiểu những gì đang được thực hiện.

119
00:09:24,790 --> 00:09:31,870
Ngoài ra, tôi sẽ làm một chút của một biến đổi trên mặt hàng ở đó,

120
00:09:31,870 --> 00:09:36,495
tôi sẽ chỉ mở rộng nó lên bởi một lượng nhỏ,

121
00:09:36,495 --> 00:09:39,570
bằng cách quy mô nó lên đến 1.01.

122
00:09:39,570 --> 00:09:42,220
Vì vậy, một chút nhỏ được nâng lên và sau đó xuất hiện,

123
00:09:42,220 --> 00:09:46,115
để làm nổi bật nó trên màn hình.

124
00:09:46,115 --> 00:09:50,370
Vì vậy, đây là lớp CSS mà

125
00:09:50,370 --> 00:09:54,535
tôi sẽ áp dụng bằng cách sử dụng chỉ thị tùy chỉnh mà tôi đã tạo ra ở đó.

126
00:09:54,535 --> 00:09:57,530
Bây giờ, tôi sẽ áp dụng chỉ thị tùy chỉnh này ở đâu?

127
00:09:57,530 --> 00:10:04,340
Chúng tôi sẽ sử dụng chỉ thị tùy chỉnh này trong tập tin mẫu thành phần menu của chúng tôi.

128
00:10:04,340 --> 00:10:06,170
Bây giờ, trước khi chúng tôi làm điều đó, chúng ta

129
00:10:06,170 --> 00:10:08,840
hãy quay trở lại để làm nổi bật chỉ thị và

130
00:10:08,840 --> 00:10:11,610
bạn sẽ nhận thấy rằng trong chỉ thị nổi bật,

131
00:10:11,610 --> 00:10:17,555
bạn có trang trí chỉ thị ở đây nơi bạn có một thuộc tính được gọi là selector,

132
00:10:17,555 --> 00:10:20,355
mà đã được thiết lập để làm nổi bật ứng dụng.

133
00:10:20,355 --> 00:10:23,360
Vì vậy, bất cứ nơi nào bạn muốn sử dụng chỉ thị này,

134
00:10:23,360 --> 00:10:25,430
bạn sẽ sử dụng một thuộc tính được gọi là

135
00:10:25,430 --> 00:10:30,110
ApphighLight trong phần tử cụ thể đó trong mẫu của bạn.

136
00:10:30,110 --> 00:10:33,940
Vì vậy, đó là cách chỉ thị này được tạo ra.

137
00:10:33,940 --> 00:10:36,910
Vì vậy, chúng ta hãy áp dụng

138
00:10:36,910 --> 00:10:41,165
chỉ thị thuộc tính nổi bật ứng dụng này trong tập tin mẫu thành phần menu của chúng tôi.

139
00:10:41,165 --> 00:10:44,749
Vì vậy, đi đến các thành phần menu tập tin mẫu,

140
00:10:44,749 --> 00:10:50,090
tôi sẽ áp dụng chỉ thị nổi bật này mat-lưới gạch ở đây.

141
00:10:50,090 --> 00:10:52,330
Vì vậy, trong ngói lưới này,

142
00:10:52,330 --> 00:11:01,950
tôi sẽ áp dụng chỉ thị thuộc tính ApphighLight cho yếu tố cụ thể này ở đây.

143
00:11:01,950 --> 00:11:04,485
Với điều này, chúng tôi đã hoàn thành tất cả các bản cập nhật.

144
00:11:04,485 --> 00:11:11,005
Hãy lưu các thay đổi và sau đó đi và xem ứng dụng của chúng tôi sau khi thay đổi này.

145
00:11:11,005 --> 00:11:13,680
Đi đến ứng dụng của chúng tôi trong trình duyệt.

146
00:11:13,680 --> 00:11:20,270
Bây giờ, với việc áp dụng chỉ thị ApphighLight mà chúng tôi vừa tạo ra,

147
00:11:20,270 --> 00:11:27,050
bạn sẽ nhận thấy chính xác những gì xảy ra khi chúng tôi duyệt vào một phần tử trong chế độ xem menu của chúng tôi ở đây.

148
00:11:27,050 --> 00:11:32,010
Vì vậy, bạn nhận thấy rằng bất cứ khi nào bạn di chuột vào một mục trong chế độ xem,

149
00:11:32,010 --> 00:11:36,770
lớp CSS nổi bật đang được áp dụng cho mỗi người trong số họ,

150
00:11:36,770 --> 00:11:41,150
theo đó mục cụ thể nào đang được đánh dấu trong menu,

151
00:11:41,150 --> 00:11:46,270
do đó điều này mang lại một trải nghiệm người dùng tốt hơn cho người dùng.

152
00:11:46,270 --> 00:11:50,719
Bạn có thể thấy rằng kích thước của phần tử đó bao giờ

153
00:11:50,719 --> 00:11:55,840
tăng nhẹ và đưa về phía trước trong quan điểm ở đây.

154
00:11:55,840 --> 00:11:58,910
Điều này hoàn thành việc thực hiện

155
00:11:58,910 --> 00:12:03,470
các chỉ thị thuộc tính tùy chỉnh mà chúng tôi đã làm trong bài tập này.

156
00:12:03,470 --> 00:12:09,810
Đây là thời điểm tốt để bạn thực hiện một cam kết git với chỉ thị tin nhắn.