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

2
00:00:04,518 --> 00:00:09,098
In der vorangegangenen Übung sahen wir die Verwendung unserer ersten Strukturrichtlinie,

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

4
00:00:09,812 --> 00:00:15,186
Stellen wir uns noch ein paar Fragen zu strukturellen Richtlinien und

5
00:00:15,186 --> 00:00:19,970
lernen, wie sie nützlich sind, wenn wir unsere Angular-Anwendungen schreiben.

6
00:00:22,000 --> 00:00:26,110
Strukturrichtlinien sind eine Art von Richtlinien.

7
00:00:26,110 --> 00:00:30,628
Direktiven ist also ein allgemeiner Dachverband, unter dem Sie Komponenten haben,

8
00:00:30,628 --> 00:00:35,847
dann haben Sie strukturelle Direktiven, und dann haben Sie Attributdirektiven.

9
00:00:35,847 --> 00:00:39,015
Also lasst uns ein wenig mehr über Direktiven lernen.

10
00:00:39,015 --> 00:00:43,121
Was wir also erkennen, ist, dass die Angular-Vorlagen dynamisch sind, also müssen sie

11
00:00:43,121 --> 00:00:47,379
im laufenden Betrieb erstellt werden, es wird eine Menge Manipulation auf dem DOM geben.

12
00:00:47,379 --> 00:00:52,721
Also, was uns die Direktiven helfen, ist, uns zu ermöglichen, Anweisungen für

13
00:00:52,721 --> 00:00:57,710
die Angular zu geben, wie die Vorlagen im DOM zu rendern.

14
00:00:57,710 --> 00:01:00,900
Also verwenden sie Direktiven, um

15
00:01:00,900 --> 00:01:04,880
Angular Anweisungen zu geben, da es die Vorlagen auf dem Bildschirm rendert.

16
00:01:04,880 --> 00:01:10,120
Im Allgemeinen kann eine Direktive direkt in Angular mit

17
00:01:10,120 --> 00:01:14,520
einer Klasse mit dem @Directive Dekorator definiert werden.

18
00:01:14,520 --> 00:01:19,044
Wir sehen ein Beispiel für eine Richtlinie, die wir selbst

19
00:01:19,044 --> 00:01:22,630
ein wenig später in diesem Kurs erstellen können.

20
00:01:22,630 --> 00:01:25,258
Im Moment schauen wir uns die Baurichtlinien an.

21
00:01:25,258 --> 00:01:26,587
Und vor allem

22
00:01:26,587 --> 00:01:32,650
haben wir bereits auf unsere erste Art der Richtlinie gestoßen, die ein Bestandteil ist.

23
00:01:32,650 --> 00:01:35,060
Eine Komponente ist eine spezielle Art von Direktive und

24
00:01:35,060 --> 00:01:39,800
Angular, die eine eigene Vorlage zugeordnet ist.

25
00:01:39,800 --> 00:01:45,700
Und wir haben bereits gesehen, wie wir eine Komponente nutzen können, um

26
00:01:45,700 --> 00:01:50,420
Teile unseres Layouts für den Bildschirm unserer Anwendung zu definieren.

27
00:01:51,910 --> 00:01:57,610
Wie ich bereits erwähnt habe, gibt es zwei andere Arten von Direktiven in Angular,

28
00:01:57,610 --> 00:02:00,465
Struktur- und Attribut-Direktiven. In

29
00:02:00,465 --> 00:02:05,138
dieser Lektion werden wir schnell strukturelle Direktiven untersuchen.

30
00:02:05,138 --> 00:02:09,359
Und dann werden wir uns Attribut-Direktiven ein wenig später in

31
00:02:09,359 --> 00:02:10,290
diesem Kurs ansehen.

32
00:02:11,400 --> 00:02:15,608
Was sind also Strukturrichtlinien und wie sind sie für uns nützlich?

33
00:02:15,608 --> 00:02:19,590
Was wir erkennen, wenn wir strukturelle Direktiven verwenden, sind,

34
00:02:19,590 --> 00:02:24,910
sie helfen uns, das Layout unserer Inhalte zu ändern,

35
00:02:24,910 --> 00:02:30,020
indem sie uns helfen, Elemente aus dem DOM hinzuzufügen und zu entfernen.

36
00:02:30,020 --> 00:02:33,800
Beachten Sie insbesondere die Verwendung des Begriffs Hinzufügen und

37
00:02:33,800 --> 00:02:37,460
Entfernen und Ersetzen von Elementen im DOM.

38
00:02:37,460 --> 00:02:41,720
Sie verwenden also buchstäblich die strukturellen Direktiven, um

39
00:02:41,720 --> 00:02:44,640
Ihr DOM Ihrer Webseite zu manipulieren.

40
00:02:44,640 --> 00:02:51,124
Sie können also die strukturellen Direktiven verwenden, indem Sie sie auf ein Hostelement anwenden,

41
00:02:51,124 --> 00:02:56,738
normalerweise ein div oder ein Listenelement im DOM und auch auf seine Nachkommen.

42
00:02:56,738 --> 00:02:59,435
Wir haben den Benutzer,

43
00:02:59,435 --> 00:03:04,840
die NGfor-Strukturrichtlinie, bereits in der vorangegangenen Übung gesehen.

44
00:03:04,840 --> 00:03:11,650
Und wir sahen, wie wir mit dem NGFor eine Reihe von Gerichten durchlaufen

45
00:03:11,650 --> 00:03:17,020
und dann jedes einzelne von ihnen anlegen, um das Menü für unser Restaurant zu erstellen.

46
00:03:18,480 --> 00:03:22,870
Hier werde ich kurz einige der gemeinsamen Strukturrichtlinien erwähnen, denen Sie beim

47
00:03:22,870 --> 00:03:27,180
Schreiben Ihrer Angular-Partition begegnen werden.

48
00:03:27,180 --> 00:03:31,520
Eine der gebräuchlichsten Strukturrichtlinien, die Sie sehen werden, ist die

49
00:03:31,520 --> 00:03:32,620
NGif-Richtlinie.

50
00:03:32,620 --> 00:03:40,710
Wenn Sie es in Ihrer Template-Syntax verwenden, schreiben Sie es als *nGIF,

51
00:03:40,710 --> 00:03:45,800
also wird diese Direktive in Ihrem DOM verwendet.

52
00:03:45,800 --> 00:03:50,973
Wenn Sie zum Beispiel die nGIF-Direktive auf ein div wie

53
00:03:50,973 --> 00:03:56,050
dieses in diesem Beispiel anwenden, geben Sie an, wo ist, dass,

54
00:03:56,050 --> 00:04:01,845
wenn das SelectedDish nicht null ist, dieses div dem DOM hinzugefügt wird.

55
00:04:01,845 --> 00:04:05,287
Wenn das SelectedDish null ist, dann

56
00:04:05,287 --> 00:04:10,053
wird dieses div, was in diesem div enthalten ist, nicht zum DOM hinzugefügt, also

57
00:04:10,053 --> 00:04:15,965
entfernen Sie dies buchstäblich aus dem DOM, wenn sich der Wert als falsch herausstellt.

58
00:04:15,965 --> 00:04:19,800
Wenn es sich als wahr erweist, wird es in die Dump hinzugefügt.

59
00:04:19,800 --> 00:04:24,280
In ähnlicher Weise sahen wir die Verwendung der NGfor-Richtlinie.

60
00:04:24,280 --> 00:04:29,580
Also, wo wir definiert haben, zum Beispiel, für die md-list-item in der vorherigen

61
00:04:29,580 --> 00:04:35,470
Übung sagten wir *ngfor und sagte, lassen Gericht Gerichte.

62
00:04:35,470 --> 00:04:40,750
Dies ermöglicht es uns, über die Reihe von Gerichten zu iterieren

63
00:04:40,750 --> 00:04:46,925
, die in unserem Typ Skript-Mantel definiert sind.

64
00:04:46,925 --> 00:04:55,570
Eine weitere strukturelle Direktive, die häufig verwendet werden könnte, ist die NGSwitch-Direktive.

65
00:04:55,570 --> 00:04:57,840
Obwohl ich momentan kein Beispiel habe,

66
00:04:57,840 --> 00:05:02,940
werden wir später in diesem Kurs auf die Verwendung der NGSwitch-Direktive stoßen.

67
00:05:02,940 --> 00:05:07,080
Dadurch können Sie selektiv bestimmte Elemente zum DOM hinzufügen,

68
00:05:07,080 --> 00:05:11,940
indem Sie eine Bedingung angeben, je nachdem, was die Bedingung auswertet,

69
00:05:11,940 --> 00:05:17,060
dann verwenden Sie eines dieser Elemente in der Liste.

70
00:05:17,060 --> 00:05:21,858
Wenn Sie mit der switch-Anweisung von C ++ oder Java vertraut sind,

71
00:05:21,858 --> 00:05:25,250
scheint Ihnen der NGSwitch sehr vertraut zu sein.

72
00:05:25,250 --> 00:05:29,710
Es verhält sich also ähnlich der switch-Anweisung, die Sie

73
00:05:29,710 --> 00:05:35,675
von Java oder C ++ gewohnt sind.

74
00:05:35,675 --> 00:05:40,748
Lassen Sie uns mit der kurzen Diskussion über Strukturrichtlinien zur nächsten Übung übergehen, in der wir die Komponenten weiter untersuchen werden.

75
00:05:40,748 --> 00:05:47,459
( MUSIK)