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 đó.
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
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.
Trên đường đi, chúng ta sẽ tìm hiểu về cách chúng ta có thể tạo ra
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.
Chúng tôi sẽ sử dụng Angular CLI để tạo ra các chỉ thị tùy chỉnh và sau đó,
cập nhật nó để thực hiện các loại
tính năng mà chúng tôi cần cung cấp bởi chỉ thị thuộc tính này.
Theo giữ chỉ thị trong một thư mục riêng biệt có tên là Chỉ thị,
trong thư mục ứng dụng của tôi.
Vì vậy, hãy để tôi tạo một thư mục mới có tên Directives.
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.
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.
Vì vậy, tại dấu nhắc,
gõ ng tạo ra hoặc g phát hiện/làm nổi bật.
Vì vậy, chỉ thị đặc biệt này sẽ được gọi là chỉ thị nổi bật.
Vì vậy, với điều này, chúng tôi sẽ tạo ra
một chỉ thị mới được gọi là chỉ thị nổi bật và sau đó chúng tôi sẽ đi
và chỉnh sửa mà làm nổi bật các tập tin chỉ thị
đã được tạo ra để tạo ra chỉ thị tùy chỉnh của chúng tôi.
Chính xác tôi đang cố gắng đạt được điều gì với chỉ thị này?
Hãy để tôi đưa bạn đến chế độ xem menu trong ứng dụng Angular của chúng tôi.
Trong chế độ xem trình đơn,
khi tôi muốn chọn bất kỳ một trong những mục này hiện tại,
tôi không có đầu mối chính xác tôi đang ở đâu.
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
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
tôi nhấp vào, tôi sẽ chọn mục cụ thể đó.
Vì vậy, đó là những gì các chức năng mà tôi sẽ
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.
Để làm điều đó, hãy mở tập tin.t directive.t nổi bật.
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ị
đã có ở đây và bạn sẽ thấy rằng chúng tôi
đã nhập khẩu giám đốc từ mã Angular.
Bây giờ để điều này, tôi sẽ thêm vào một vài nhập khẩu nữa.
Vì vậy, chúng tôi sẽ nhập ElementRef và sau đó chúng tôi sẽ nhập Renderer2 đây.
Bây giờ Renderer2 chỉ có sẵn với Angular bốn trở lên.
Phiên bản trước của renderer được gọi là
renderush và nó đã được nhân đôi bây giờ với Angular four.
Renderer2 bây giờ là một thực hiện mới của
renderer với sự hỗ trợ tốt hơn cho một số tính năng khác.
Vì vậy, tôi sẽ áp dụng Renderer2 để tạo ra chỉ thị nổi bật.
Bây giờ tại sao chúng ta sử dụng bộ kết xuất này?
Bây giờ khi bạn tạo ra chỉ thị trong ứng dụng Angular của bạn,
từ ứng dụng Angular của bạn chính nó,
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,
bạn có thể sử dụng cùng một giàn giáo mã cho
ứng dụng Angular của bạn để tạo ra một ứng dụng cho mục đích khác.
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,
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.
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,
không phải vào một trình duyệt.
Vì vậy, chúng ta cần phải sử dụng Renderer2 này,
cho phép chúng ta tự động thích nghi với
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.
Vì vậy, đó là lý do tại sao tôi đang sử dụng các renderer ở đây.
Ngoài ra, một điều nữa mà tôi muốn nhập là HostListener.
HostListener sẽ nghe các chuyển động chuột từ màn hình
và đáp ứng thích hợp trong những trường hợp đó.
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.
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,
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.
Vì vậy, trước tiên chúng ta sẽ sử dụng một el,
đó là loại Elementref và
cũng là thứ hai mà chúng ta sẽ sử dụng là renderer,
đó là loại Renderer2.
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
HostListener và sau đó họ sẽ chỉ ra rằng cho HostListener,
khi sự kiện mouseenter xảy ra,
sau đó chúng ta sẽ gọi phương pháp onmouseenter
và trong phương pháp onmouseenter, chúng ta sẽ làm điều gì đó.
Tương tự như vậy, tôi sẽ tạo một cái khác
được gọi là HostListener và mouseleave.
Vì vậy, khi chuột rời khỏi một khu vực cụ thể,
sau đó bạn sẽ làm gì trên mouseleave?
Chúng ta sẽ thực hiện một hoạt động khác.
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,
chúng tôi đang sử dụng chỉ thị thuộc tính này để làm nổi bật
mục cụ thể từ danh sách lưới của tôi mà chuột đã di chuột vào.
Vì vậy, đó là mục đích để thực hiện những điều này
và khi con trỏ chuột di chuột ra khỏi mục đó,
điều đó sẽ không còn được đánh dấu.
Vì vậy, đó là mục đích của chỉ thị này, chỉ
thị nổi bật mà tôi đang tạo ra ở đây.
Vì vậy, khi chuột đi vào một khu vực cụ thể.
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.
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.
Vì vậy, lớp mà tôi sẽ thêm,
cách nó được cấu hình sẽ nói này.el.NativeElement và
tham số thứ hai là
tên lớp mà bạn sẽ áp dụng khi bạn mạo hiểm vào khu vực đó.
Vì vậy, chúng tôi sẽ áp dụng lớp tô sáng này cho phần tử đó khi
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.
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,
tôi sẽ loại bỏ lớp đó.
Vì vậy, phương pháp RemoveCLASS cũng được hỗ trợ bởi Renderer2.
Vì vậy, trong trường hợp này,
khi chuột di chuyển vào vùng đó,
lớp tô sáng này sẽ được thêm vào mục lưới đó.
Khi chuột rời khỏi mục lưới cụ thể đó,
lớp tô sáng sẽ bị loại bỏ khỏi các mục lưới.
Vì vậy, đây là cách sử dụng chỉ thị thuộc tính này,
Tôi đang thêm và loại bỏ các lớp học,
lớp CSS để mục lưới của tôi trong trang GridView của tôi.
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.
Vì vậy, để làm điều đó, tôi sẽ đi vào
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.
Vì vậy, trong tập tin styles.scss,
tôi sẽ thêm vào lớp CSS nổi bật ở đó.
Lớp CSS nổi bật tôi sẽ định nghĩa là màu nền.
Tôi sẽ áp dụng nền nhợt nhạt,
mà tôi đã xác định trước đó và sau đó,
tôi sẽ áp dụng một biên giới của một điểm ảnh,
biên giới rắn của màu sắc,
tiểu học màu tối, mà tôi cũng đã định nghĩa trước đó
như là một biến CSS và tôi cũng sẽ tăng z-index để một.
Đ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 đó.
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.
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 ở đó,
tôi sẽ chỉ mở rộng nó lên bởi một lượng nhỏ,
bằng cách quy mô nó lên đến 1.01.
Vì vậy, một chút nhỏ được nâng lên và sau đó xuất hiện,
để làm nổi bật nó trên màn hình.
Vì vậy, đây là lớp CSS mà
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 ở đó.
Bây giờ, tôi sẽ áp dụng chỉ thị tùy chỉnh này ở đâu?
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.
Bây giờ, trước khi chúng tôi làm điều đó, chúng ta
hãy quay trở lại để làm nổi bật chỉ thị và
bạn sẽ nhận thấy rằng trong chỉ thị nổi bật,
bạn có trang trí chỉ thị ở đây nơi bạn có một thuộc tính được gọi là selector,
mà đã được thiết lập để làm nổi bật ứng dụng.
Vì vậy, bất cứ nơi nào bạn muốn sử dụng chỉ thị này,
bạn sẽ sử dụng một thuộc tính được gọi là
ApphighLight trong phần tử cụ thể đó trong mẫu của bạn.
Vì vậy, đó là cách chỉ thị này được tạo ra.
Vì vậy, chúng ta hãy áp dụng
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.
Vì vậy, đi đến các thành phần menu tập tin mẫu,
tôi sẽ áp dụng chỉ thị nổi bật này mat-lưới gạch ở đây.
Vì vậy, trong ngói lưới này,
tôi sẽ áp dụng chỉ thị thuộc tính ApphighLight cho yếu tố cụ thể này ở đây.
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.
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.
Đi đến ứng dụng của chúng tôi trong trình duyệt.
Bây giờ, với việc áp dụng chỉ thị ApphighLight mà chúng tôi vừa tạo ra,
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.
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,
lớp CSS nổi bật đang được áp dụng cho mỗi người trong số họ,
theo đó mục cụ thể nào đang được đánh dấu trong menu,
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.
Bạn có thể thấy rằng kích thước của phần tử đó bao giờ
tăng nhẹ và đưa về phía trước trong quan điểm ở đây.
Điều này hoàn thành việc thực hiện
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.
Đâ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.