1
00:00:03,650 --> 00:00:10,075
Wir hatten gerade eine kurze Einführung in Attribut-Direktiven in der vorherigen Vorlesung.

2
00:00:10,075 --> 00:00:16,440
Lassen Sie uns nun eine benutzerdefinierte Attribut-Direktive für unsere Winkelanwendung konstruieren und

3
00:00:16,440 --> 00:00:23,025
sie dann innerhalb der Ansichten einiger Komponenten innerhalb unserer Winkelanwendung verwenden.

4
00:00:23,025 --> 00:00:26,340
Auf dem Weg werden wir lernen, wie wir

5
00:00:26,340 --> 00:00:30,795
benutzerdefinierte Direktiven erstellen und sie in unserer Angular-Anwendung verwenden können.

6
00:00:30,795 --> 00:00:36,275
Wir werden Angular CLI verwenden, um die benutzerdefinierte Direktive zu erstellen und danach zu

7
00:00:36,275 --> 00:00:39,830
aktualisieren, um die Art von

8
00:00:39,830 --> 00:00:45,245
Funktionen auszuführen, die wir von dieser Attribut-Direktive zur Verfügung gestellt werden müssen.

9
00:00:45,245 --> 00:00:51,220
Unter der behalten Sie die Direktive in einem separaten Ordner namens Direktiven

10
00:00:51,220 --> 00:00:52,700
innerhalb meines App-Ordners.

11
00:00:52,700 --> 00:00:56,805
Lassen Sie mich also einen neuen Ordner mit dem Namen Direktiven erstellen.

12
00:00:56,805 --> 00:01:02,820
Jetzt werde ich meine benutzerdefinierte Direktive in diesem Direktiven-Ordner erstellen.

13
00:01:02,820 --> 00:01:07,170
Wird die Hilfe der eckigen CLI nehmen, um unsere benutzerdefinierte Direktive zu erstellen. Geben

14
00:01:07,170 --> 00:01:08,495
Sie also an der

15
00:01:08,495 --> 00:01:20,400
Eingabeaufforderung ng generate oder g detectives/highlight ein.

16
00:01:20,780 --> 00:01:26,110
Diese spezielle Richtlinie wird also die Highlight-Richtlinie genannt.

17
00:01:26,110 --> 00:01:28,790
Damit werden wir

18
00:01:28,790 --> 00:01:34,460
eine neue Direktive namens Highlight-Direktive erstellen, und dann werden wir nun gehen

19
00:01:34,460 --> 00:01:38,600
und diese Highlight-Direktive-Dateien bearbeiten, die

20
00:01:38,600 --> 00:01:43,175
erstellt wurden, um unsere benutzerdefinierte Direktive zu erstellen.

21
00:01:43,175 --> 00:01:46,895
Was genau versuche ich mit dieser Richtlinie zu erreichen?

22
00:01:46,895 --> 00:01:54,355
Lassen Sie mich Sie zur Menüansicht in unserer Angular Anwendung bringen.

23
00:01:54,355 --> 00:01:58,420
Wenn ich in der Menüansicht eines dieser Elemente auswählen möchte,

24
00:01:58,420 --> 00:02:01,495
habe ich keine Ahnung, wo ich gerade bin.

25
00:02:01,495 --> 00:02:08,520
Stattdessen, wenn meine Maus auf eines dieser Elemente in meiner Rasterliste schwebt,

26
00:02:08,520 --> 00:02:13,340
möchte ich in der Lage sein, einige Elemente hervorzuheben, um anzuzeigen, dass ich, wenn

27
00:02:13,340 --> 00:02:15,870
ich klicke, dieses bestimmte Element auswählen werde.

28
00:02:15,870 --> 00:02:19,220
Also, das ist, was die Funktionalität, die ich

29
00:02:19,220 --> 00:02:23,825
mit meiner Highlight-Direktive entwerfen werde, die ich gerade erstellt habe.

30
00:02:23,825 --> 00:02:28,410
Um dies zu tun, öffnen wir die Datei Hervorhebung directive.ts.

31
00:02:28,410 --> 00:02:33,935
Sie sehen also, dass wir das Bare-Bones Gerüst für die Direktive

32
00:02:33,935 --> 00:02:36,500
bereits hier haben und Sie werden sehen, dass wir

33
00:02:36,500 --> 00:02:39,845
den Regisseur bereits aus dem Angular-Code importiert haben.

34
00:02:39,845 --> 00:02:45,230
Nun dazu werde ich noch ein paar Importe hinzufügen.

35
00:02:45,230 --> 00:02:52,055
Also, wir importieren elementRef und dann werden wir hier Renderer2 importieren.

36
00:02:52,055 --> 00:02:57,215
Jetzt ist Renderer2 nur mit Angular vier und höher verfügbar.

37
00:02:57,215 --> 00:02:59,710
Die frühere Version des Renderers hieß

38
00:02:59,710 --> 00:03:04,290
Renderush und wurde jetzt mit Angular vier dupliziert.

39
00:03:04,290 --> 00:03:06,920
Renderer2 ist jetzt eine neue Implementierung von

40
00:03:06,920 --> 00:03:11,030
Renderer mit besserer Unterstützung für einige andere Funktionen.

41
00:03:11,030 --> 00:03:18,045
Also werde ich den Renderer2 anwenden, um die Highlight-Direktive zu erstellen.

42
00:03:18,045 --> 00:03:20,005
Warum verwenden wir diesen Renderer?

43
00:03:20,005 --> 00:03:23,690
Wenn Sie nun Direktiven innerhalb Ihrer Angular-Anwendung

44
00:03:23,690 --> 00:03:25,640
aus Ihrer Angular-Anwendung selbst erstellen,

45
00:03:25,640 --> 00:03:30,750
obwohl unsere Angular-Anwendung derzeit hauptsächlich im Browser gerendert wird,

46
00:03:30,750 --> 00:03:33,740
können Sie denselben Gerüstcode für

47
00:03:33,740 --> 00:03:37,420
Ihre Angular-Anwendung verwenden, um eine Anwendung für andere Zwecke.

48
00:03:37,420 --> 00:03:42,985
In dem nativen Skip-Kurs, den wir später in dieser Spezialisierung sehen werden,

49
00:03:42,985 --> 00:03:50,385
werden wir eine weitere Verwendung dieses Codes zum Erstellen von Anwendungen mit NativeScript sehen.

50
00:03:50,385 --> 00:03:54,470
In diesem Fall würde das Rendern auf eine andere Art und Weise erfolgen,

51
00:03:54,470 --> 00:03:56,160
nicht in einen Browser.

52
00:03:56,160 --> 00:04:00,455
Also, wir müssen dieses Renderer2 verwenden,

53
00:04:00,455 --> 00:04:03,710
was es uns ermöglicht, sich automatisch an

54
00:04:03,710 --> 00:04:08,120
die entsprechende Plattform anzupassen, auf der das Rendern dieser Ansicht durchgeführt wird.

55
00:04:08,120 --> 00:04:13,320
Also, das ist der Grund, warum ich den Renderer hier verwende.

56
00:04:13,660 --> 00:04:20,460
Eine weitere Sache, die ich importieren möchte, ist der HostListener.

57
00:04:20,460 --> 00:04:24,650
Der HostListener hört Mausbewegungen vom Bildschirm ab

58
00:04:24,650 --> 00:04:28,755
und reagiert unter diesen Umständen entsprechend.

59
00:04:28,755 --> 00:04:34,099
Diese werden wir sehen, wenn wir die Richtlinie in wenigen Augenblicken erarbeiten.

60
00:04:34,099 --> 00:04:37,010
Nun, da wir die Dinge importiert haben, die wir brauchen,

61
00:04:37,010 --> 00:04:40,620
werden wir ein paar Dinge in unseren Konstruktor injizieren.

62
00:04:40,620 --> 00:04:47,180
Also, wir werden zuerst ein el verwenden,

63
00:04:47,180 --> 00:04:52,625
das vom Typ ElementRef ist und

64
00:04:52,625 --> 00:04:59,569
auch der zweite, den wir verwenden werden, ist der

65
00:04:59,569 --> 00:05:04,265
Renderer, der vom Typ Renderer2 ist.

66
00:05:04,265 --> 00:05:11,254
Nun mit diesem, was wir tun werden, ist, dass wir

67
00:05:11,254 --> 00:05:20,360
den HostListener verwenden und dann würden sie anzeigen, dass für den HostListener,

68
00:05:20,360 --> 00:05:28,094
wenn das mouseenter Ereignis auftritt,

69
00:05:28,094 --> 00:05:38,340
dann werden wir die onmouseenter Methode aufrufen

70
00:05:38,340 --> 00:05:41,400
und in der onmouseenter Methode, werden wir etwas tun.

71
00:05:41,400 --> 00:05:43,790
In ähnlicher Weise werde ich einen anderen

72
00:05:43,790 --> 00:05:55,005
namens HostListener und Mouseleave erstellen.

73
00:05:55,005 --> 00:05:58,310
Also, wenn die Maus eine bestimmte Region verlässt,

74
00:05:58,310 --> 00:06:02,790
was wirst du dann auf Mouseleave tun?

75
00:06:02,950 --> 00:06:06,470
Wir werden eine andere Operation machen.

76
00:06:06,470 --> 00:06:11,660
Also, was wir tun werden, ist, wenn die Maus in eine bestimmte Region eintritt. In diesem Fall

77
00:06:11,660 --> 00:06:15,710
verwenden wir diese Attribut-Direktive, um

78
00:06:15,710 --> 00:06:22,130
das spezifische Element aus meiner Rasterliste hervorzuheben, auf das die Maus gefahren ist.

79
00:06:22,130 --> 00:06:24,935
Das ist also der Zweck, diese zu implementieren,

80
00:06:24,935 --> 00:06:28,050
und wenn der Mauszeiger von diesem Element wegbewegt,

81
00:06:28,050 --> 00:06:29,580
wird das nicht mehr hervorgehoben.

82
00:06:29,580 --> 00:06:31,575
Das ist also der Zweck dieser Richtlinie,

83
00:06:31,575 --> 00:06:33,850
der Highlight-Direktive, die ich hier erstelle.

84
00:06:33,850 --> 00:06:40,715
Also, wenn die Maus in einen bestimmten Bereich eintritt.

85
00:06:40,715 --> 00:06:47,245
Also werde ich den Renderer verwenden und der Renderer stellt eine Methode namens AddClass zur Verfügung.

86
00:06:47,245 --> 00:06:55,990
Diese Methode wird verwendet, um dem Rasterelement in meiner Rasterliste eine Klasse hinzuzufügen.

87
00:06:55,990 --> 00:06:58,755
Also, die Klasse, die ich hinzufügen werde,

88
00:06:58,755 --> 00:07:08,160
die Art, wie sie konfiguriert ist, wird this.el.NativeElement sagen und

89
00:07:08,160 --> 00:07:12,260
der zweite Parameter ist

90
00:07:12,260 --> 00:07:17,240
der Klassenname, den Sie anwenden werden, wenn Sie sich in diesen Bereich wagen.

91
00:07:17,240 --> 00:07:21,965
Daher werden wir diese Hervorhebungsklasse auf dieses Element anwenden, wenn die

92
00:07:21,965 --> 00:07:27,425
Maus in den Bereich bewegt, in dem das Element in der Ansicht gerendert wird.

93
00:07:27,425 --> 00:07:34,765
Jetzt das Gleiche. Ich werde eine andere Methode machen, wenn die Maus verlässt,

94
00:07:34,765 --> 00:07:37,200
ich werde diese Klasse entfernen.

95
00:07:37,200 --> 00:07:41,275
Daher wird die removeClass-Methode auch von Renderer2 unterstützt.

96
00:07:41,275 --> 00:07:42,530
Also, in diesem Fall,

97
00:07:42,530 --> 00:07:44,780
wenn die Maus in diesen Bereich bewegt,

98
00:07:44,780 --> 00:07:49,270
wird diese Hervorhebungsklasse zu diesem Rasterelement hinzugefügt.

99
00:07:49,270 --> 00:07:52,250
Wenn die Maus dieses bestimmte Rasterelement verlässt,

100
00:07:52,250 --> 00:07:54,890
wird die Hervorhebungsklasse aus den Rasterelementen entfernt.

101
00:07:54,890 --> 00:07:57,685
So

102
00:07:57,685 --> 00:08:00,540
füge ich mit dieser Attributdirektive Klassen,

103
00:08:00,540 --> 00:08:06,840
CSS-Klassen zu meinem Gitterelement auf meiner GridView-Seite hinzu und entferne.

104
00:08:06,840 --> 00:08:12,070
Nun, der nächste Schritt ist natürlich, diese Klasse als Highlight-Klasse genannt zu erstellen.

105
00:08:12,070 --> 00:08:16,535
Also, um das zu tun, werde ich in die

106
00:08:16,535 --> 00:08:21,495
Datei styles.scss gehen, wo wir die globalen Stile hier gespeichert haben.

107
00:08:21,495 --> 00:08:23,900
Also, innerhalb der styles.scss-Datei

108
00:08:23,900 --> 00:08:32,385
werde ich dort die Highlight-CSS-Klasse hinzufügen.

109
00:08:32,385 --> 00:08:37,340
Die Highlight-CSS-Klasse werde ich als Hintergrundfarbe definieren.

110
00:08:37,340 --> 00:08:42,825
Ich werde background-blass anwenden,

111
00:08:42,825 --> 00:08:46,810
was ich bereits früher definiert habe und dann

112
00:08:46,810 --> 00:08:52,140
würde ich eine Grenze von einem Pixel anwenden,

113
00:08:52,140 --> 00:08:55,780
feste Grenze der Farbe,

114
00:08:55,860 --> 00:09:04,595
primäre Farbe-dunkel, die auch ich früher

115
00:09:04,595 --> 00:09:13,335
als CSS-Variable definiert habe und ich werde auch den z-Index auf eins erhöhen.

116
00:09:13,335 --> 00:09:18,750
Das bedeutet, dass dieser Gegenstand über die verbleibenden Gegenstände dort aufgehoben wird.

117
00:09:18,750 --> 00:09:24,790
Ich bin mir sicher, dass Sie aus Ihrem Wissen über CSS verstehen, was getan wird.

118
00:09:24,790 --> 00:09:31,870
Darüber hinaus werde ich ein wenig eine Transformation auf dem Gegenstand dort machen,

119
00:09:31,870 --> 00:09:36,495
ich werde es nur um eine winzige Menge skalieren,

120
00:09:36,495 --> 00:09:39,570
indem ich es bis zu 1.01 skaliere.

121
00:09:39,570 --> 00:09:42,220
Also, winziges bisschen angehoben und dann aufgetaucht,

122
00:09:42,220 --> 00:09:46,115
so dass es auf dem Bildschirm hervorhebt.

123
00:09:46,115 --> 00:09:50,370
Also, dies ist die CSS-Klasse, die

124
00:09:50,370 --> 00:09:54,535
ich mit der benutzerdefinierten Direktive anwenden werde, die ich dort erstellt habe.

125
00:09:54,535 --> 00:09:57,530
Nun, wo werde ich diese benutzerdefinierte Direktive anwenden?

126
00:09:57,530 --> 00:10:04,340
Wir werden diese benutzerdefinierte Direktive in unserer Menükomponenten-Vorlagendatei verwenden.

127
00:10:04,340 --> 00:10:06,170
Nun, bevor wir das tun,

128
00:10:06,170 --> 00:10:08,840
gehen wir zurück zur Hervorhebungs-Direktive und

129
00:10:08,840 --> 00:10:11,610
Sie würden feststellen, dass

130
00:10:11,610 --> 00:10:17,555
Sie in der Highlight-Direktive diesen Direktive-Dekorator hier haben, wo Sie eine Eigenschaft namens Selektor haben,

131
00:10:17,555 --> 00:10:20,355
die auf App-Highlight gesetzt wurde.

132
00:10:20,355 --> 00:10:23,360
Also, wo immer Sie diese Direktive verwenden möchten,

133
00:10:23,360 --> 00:10:25,430
verwenden Sie ein Attribut namens

134
00:10:25,430 --> 00:10:30,110
AppHighlight innerhalb dieses bestimmten Elements in Ihrer Vorlage.

135
00:10:30,110 --> 00:10:33,940
Also, so wird diese Direktive erstellt.

136
00:10:33,940 --> 00:10:36,910
Also, lassen Sie uns diese App Highlight

137
00:10:36,910 --> 00:10:41,165
Attribut-Direktive innerhalb unserer Menükomponenten Template-Datei anwenden.

138
00:10:41,165 --> 00:10:44,749
Also, wenn ich in die Menükomponenten-Vorlagendatei

139
00:10:44,749 --> 00:10:50,090
gehe, werde ich diese Highlight-Direktive hier auf diese Mat-Grid-Kachel anwenden.

140
00:10:50,090 --> 00:10:52,330
Also, in dieser Grid-Kachel,

141
00:10:52,330 --> 00:11:01,950
werde ich diese AppHighlight-Attributrichtlinie hier auf dieses bestimmte Element anwenden.

142
00:11:01,950 --> 00:11:04,485
Damit haben wir alle Updates abgeschlossen.

143
00:11:04,485 --> 00:11:11,005
Lassen Sie uns die Änderungen speichern und dann gehen und werfen Sie einen Blick auf unsere Anwendung nach dieser Änderung.

144
00:11:11,005 --> 00:11:13,680
Gehen Sie zu unserer Anwendung im Browser.

145
00:11:13,680 --> 00:11:20,270
Jetzt, mit der Anwendung der Apphighlight-Direktive, die wir gerade erstellt haben,

146
00:11:20,270 --> 00:11:27,050
werden Sie genau feststellen, was passiert, wenn wir hier auf ein Element in unserer Menüansicht stöbern.

147
00:11:27,050 --> 00:11:32,010
Sie bemerken also, dass jedes Mal, wenn Sie den Mauszeiger auf ein Element in

148
00:11:32,010 --> 00:11:36,770
der Ansicht bewegen, die Highlight-CSS-Klasse auf jeden von ihnen angewendet wird,

149
00:11:36,770 --> 00:11:41,150
wobei welches bestimmte Element im Menü hervorgehoben wird,

150
00:11:41,150 --> 00:11:46,270
so dass dies eine bessere Benutzererfahrung für den Benutzer bietet.

151
00:11:46,270 --> 00:11:50,719
Sie können sehen, dass die Größe dieses Elements immer so leicht

152
00:11:50,719 --> 00:11:55,840
erhöht und in der Ansicht hier vorgebracht wird.

153
00:11:55,840 --> 00:11:58,910
Damit ist die Implementierung

154
00:11:58,910 --> 00:12:03,470
der benutzerdefinierten Attribut-Direktive abgeschlossen, die wir in dieser Übung durchgeführt haben.

155
00:12:03,470 --> 00:12:09,810
Dies ist ein guter Zeitpunkt für Sie, ein Git-Commit mit der Nachrichten-Direktive zu machen.