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

2
00:00:04,740 --> 00:00:09,772
Mit dem Angular Router haben wir bereits gelernt, wie wir

3
00:00:09,772 --> 00:00:15,673
mit der Router-Link-Direktive von einer Ansicht zur anderen navigieren können, um den Link anzugeben.

4
00:00:15,673 --> 00:00:21,823
Und auch das Router-Modul, das uns mit der Spezifikation des Pfades ermöglicht,

5
00:00:21,823 --> 00:00:26,715
zu den Ansichten der verschiedenen Komponenten zu navigieren.

6
00:00:26,715 --> 00:00:31,265
Nehmen wir nun ein Beispiel für die dishdetail Komponente.

7
00:00:31,265 --> 00:00:36,680
Bisher hat die dishdetail Komponente gearbeitet, indem sie die Details

8
00:00:36,680 --> 00:00:42,270
des spezifischen Gerichts, das sie angezeigt werden muss, von der Menükomponente erhalten hat.

9
00:00:42,270 --> 00:00:47,211
Dies wurde jedoch erleichtert, weil die dishdetail-Komponente eine Eigenschaft

10
00:00:47,211 --> 00:00:49,290
hatte, die den Wert sendete.

11
00:00:49,290 --> 00:00:52,201
Und dann benutzten wir den Eingabe-Dekorator für

12
00:00:52,201 --> 00:00:57,027
die Variable innerhalb der dishdetail-Komponente, um diesen Wert zu erhalten, der

13
00:00:57,027 --> 00:01:00,800
von der Menükomponente übergeben wurde.

14
00:01:00,800 --> 00:01:06,120
Wenn diese Komponenten nun über einen Router an diese weitergeleitet werden,

15
00:01:06,120 --> 00:01:10,440
besteht diese Verbindung zwischen den Komponenten nicht mehr.

16
00:01:10,440 --> 00:01:13,995
Daher müssen wir den Angular Router nutzen, um

17
00:01:13,995 --> 00:01:17,560
Informationen von einer Komponente an die andere Komponente weitergeben zu können.

18
00:01:17,560 --> 00:01:22,140
Und dies geschieht normalerweise in Form von Parametern.

19
00:01:22,140 --> 00:01:25,940
Parameter, die entweder als Routenparameter angegeben

20
00:01:25,940 --> 00:01:29,600
werden können, wie wir ein wenig später lernen, oder Abfrageparameter.

21
00:01:31,480 --> 00:01:34,320
Für den Angular Router haben wir

22
00:01:34,320 --> 00:01:38,890
bisher gelernt, dass die Pfade alle als URL angegeben sind.

23
00:01:38,890 --> 00:01:43,532
Angenommen, Sie müssen einen Parameterwert von einer Komponente an eine

24
00:01:43,532 --> 00:01:44,980
andere Komponente übergeben.

25
00:01:44,980 --> 00:01:46,820
Wie machen wir das dann?

26
00:01:46,820 --> 00:01:50,550
Jetzt können Sie nur zwischen den Komponenten kommunizieren,

27
00:01:50,550 --> 00:01:52,125
indem Sie die Routerverbindung verwenden.

28
00:01:52,125 --> 00:01:54,570
und/oder um

29
00:01:54,570 --> 00:01:58,820
das Router-Modul zu verwenden, um die Navigation von einer Komponente zu einer anderen Komponente durchzuführen.

30
00:01:58,820 --> 00:02:06,370
Nun, hier ist die Möglichkeit, Parameterwerte innerhalb der URL für

31
00:02:06,370 --> 00:02:12,070
eine Komponente, den Pfad für eine Komponente, anzugeben, ermöglicht es uns, diese Informationen zu übergeben.

32
00:02:12,070 --> 00:02:16,690
Also, zum Beispiel, wenn wir in der Lage sein wollen, ein Gericht

33
00:02:16,690 --> 00:02:20,450
mit einer ID 42 in der dishdetail Komponente anzuzeigen.

34
00:02:20,450 --> 00:02:25,680
Wenn wir die Möglichkeit hätten, etwas wie /dishdetail/42.

35
00:02:25,680 --> 00:02:31,780
Und dann lassen Sie das dishdetail die Nummer 42 direkt von der URL abholen.

36
00:02:31,780 --> 00:02:37,000
Dann haben wir einen Mechanismus erleichtert, um diese Information

37
00:02:37,000 --> 00:02:42,710
eine Komponente zu einer anderen Komponente zu vermitteln, wenn wir zu der anderen Komponente navigieren.

38
00:02:42,710 --> 00:02:47,389
Dies ist, was in Angular Router Modul wird als Routenparameter bezeichnet.

39
00:02:48,560 --> 00:02:50,400
Wie funktioniert ein Routenparameter?

40
00:02:50,400 --> 00:02:54,410
Wenn Sie also einen Routenparameter in der Pfaddefinition angeben,

41
00:02:54,410 --> 00:02:57,260
wird dieser Routenparameter mit einem Token angegeben.

42
00:02:57,260 --> 00:03:02,300
Wenn Sie also den Pfad in der Pfadspezifikation für

43
00:03:02,300 --> 00:03:05,600
die Routen angeben, würden Sie einen Pfad wie diesen angeben.

44
00:03:05,600 --> 00:03:09,952
Also würden Sie sagen, dishdetail/:id.

45
00:03:09,952 --> 00:03:14,750
Also, wo id das Token wird, das den

46
00:03:14,750 --> 00:03:18,359
Route-Parameter zu der spezifischen Komponente trägt.

47
00:03:18,359 --> 00:03:21,200
Die Komponente dishdetail in diesem Beispiel.

48
00:03:21,200 --> 00:03:25,002
Auf diese Weise können Sie einen Routenparameter im Pfad angeben.

49
00:03:25,002 --> 00:03:30,098
Und dann können Sie den Parameter von einem anderen Speicherort

50
00:03:30,098 --> 00:03:34,810
an die bestimmte Komponente übergeben, die diesen Parameter benötigt.

51
00:03:34,810 --> 00:03:37,240
Die Komponente dishdetail in diesem Beispiel.

52
00:03:38,810 --> 00:03:42,510
Nun, die nächste wichtige Frage, die in Ihrem Kopf auftreten wird, ist,

53
00:03:42,510 --> 00:03:44,610
wie wir diesen Routenparameter übergeben?

54
00:03:44,610 --> 00:03:50,134
Nun, wenn Sie darüber nachdenken, wenn Sie durch die dishdetail Komponente navigieren.

55
00:03:50,134 --> 00:03:55,255
Sie kommen von einer anderen Komponente aus, indem Sie entweder auf einen Link klicken oder

56
00:03:55,255 --> 00:04:01,020
etwas namens navigieren Funktion verwenden, wie das Routenmodul für uns bereitstellt.

57
00:04:01,020 --> 00:04:06,240
Wir betrachten beide Möglichkeiten, zu einer bestimmten Komponente zu navigieren.

58
00:04:06,240 --> 00:04:11,222
Wenn Sie nun den Route-Parameter angeben müssen,

59
00:04:11,222 --> 00:04:16,070
erinnern Sie sich, dass wir den Link mit der

60
00:04:16,070 --> 00:04:20,750
Router-Link-Direktive in unseren Template-Dateien angegeben haben.

61
00:04:20,750 --> 00:04:23,470
Nun, wenn Sie dies in den Vorlagendateien angeben,

62
00:04:23,470 --> 00:04:29,040
dann nimmt der Routerlink auch ein Array ein, wie wir sehen.

63
00:04:29,040 --> 00:04:31,500
Ein Link-Parameter-Array,

64
00:04:31,500 --> 00:04:35,170
in dem Sie den Parameter explizit angeben können, der übertragen wird.

65
00:04:35,170 --> 00:04:40,480
Also, zum Beispiel, in diesem Beispiel, das Sie hier sehen, geben wir ein.

66
00:04:40,480 --> 00:04:42,850
und dann machen Sie ein ngFor.

67
00:04:42,850 --> 00:04:47,723
Sie durchlaufen also eine Reihe von JavaScript-Objekten in

68
00:04:47,723 --> 00:04:50,720
einem JavaScript-Objektarray.

69
00:04:50,720 --> 00:04:52,860
Dann, wenn Sie die Routerverbindung angeben.

70
00:04:52,860 --> 00:04:55,770
Dort können Sie also den Router-Link angeben.

71
00:04:55,770 --> 00:04:58,260
Aber jetzt, umgeben von eckigen Klammern.

72
00:04:58,260 --> 00:05:05,150
Und dies wird einen Wert wie dieser nehmen hat ein Link-Parameter-Array.

73
00:05:05,150 --> 00:05:08,768
Hier können Sie also verschiedene Teile des Verknüpfungsparameters angeben.

74
00:05:08,768 --> 00:05:15,370
Und Angular Router verbindet diese zusammen, um die eigentliche URL zu bilden.

75
00:05:15,370 --> 00:05:19,300
Hier können Sie also sehen, dass der erste Teil des Linkparameters

76
00:05:19,300 --> 00:05:23,640
hier als String angegeben wird, also /dishdetail hier.

77
00:05:23,640 --> 00:05:28,970
Aber der zweite Teil wird als Wert angegeben, der

78
00:05:28,970 --> 00:05:30,070
von der Schale erhalten wird.

79
00:05:31,130 --> 00:05:38,710
Welches ist das Gericht, das JavaScript-Objekt aus dem JavaScript-Objekt-Array hier.

80
00:05:38,710 --> 00:05:41,204
So wird jedes Gericht eine dish.id tragen.

81
00:05:41,204 --> 00:05:44,090
So kann die dish.id als

82
00:05:44,090 --> 00:05:47,640
einer der Werte innerhalb dieses Linkparameter-Arrays hier angegeben werden.

83
00:05:47,640 --> 00:05:52,170
Wenn Sie also darauf klicken,

84
00:05:52,170 --> 00:05:57,130
wird diese dish.id für das spezifische Gericht durch die spezifische ID für das Gericht ersetzt.

85
00:05:57,130 --> 00:06:01,890
Wenn zum Beispiel die ID 42 ist, wird dies durch 42 ersetzt.

86
00:06:01,890 --> 00:06:06,779
Wenn also der Angular Router diesen Router-Link empfängt,

87
00:06:06,779 --> 00:06:11,783
wird er die URL als /dishdetail/42.

88
00:06:11,783 --> 00:06:17,010
Die 42 ist der Wert der dish.id an dieser Stelle.

89
00:06:17,010 --> 00:06:19,630
So können Sie Parameter übergeben.

90
00:06:19,630 --> 00:06:21,500
Der zweite Teil der Frage

91
00:06:21,500 --> 00:06:27,790
ist natürlich, wie ruft die Komponente diesen Wert aus dem Linkparameter ab?

92
00:06:27,790 --> 00:06:30,130
Über das wir in der nächsten Folie sprechen werden.

93
00:06:31,320 --> 00:06:36,380
Eine andere Möglichkeit, dass Sie diese Navigation zu der anderen Komponente verursachen können,

94
00:06:36,380 --> 00:06:42,380
ist auch die Verwendung einer Methode namens navigieren, die vom Routermodul bereitgestellt wird.

95
00:06:42,380 --> 00:06:44,740
So können Sie sagen, this.router.navigieren.

96
00:06:44,740 --> 00:06:47,888
Dies kann also in Ihrem TypeScript-Code oder

97
00:06:47,888 --> 00:06:53,250
Ihrem JavaScript-Code enthalten sein, um automatisch die Navigation zum anderen zu verursachen.

98
00:06:53,250 --> 00:06:58,337
Dies könnte also in einer Methode enthalten sein, die Sie

99
00:06:58,337 --> 00:07:03,432
in den TypeScript-Code Ihrer Komponente einschließen.

100
00:07:03,432 --> 00:07:08,575
Und das kann von Ihrer Vorlage aufgerufen werden.

101
00:07:08,575 --> 00:07:11,921
Sagen Sie zum Beispiel, indem Sie dort auf einen Link klicken.

102
00:07:11,921 --> 00:07:17,097
Also innerhalb des Codes können Sie eine Anweisung wie diese einfügen,

103
00:07:17,097 --> 00:07:19,582
this.router.navigieren.

104
00:07:19,582 --> 00:07:24,152
Und diese Navigations-Methode verwendet das gleiche Link-Parameter-Array

105
00:07:24,152 --> 00:07:27,466
wie der Parameterwert.

106
00:07:27,466 --> 00:07:33,056
Dadurch können diese Informationen auch dem Angular Router zur Verfügung gestellt werden

107
00:07:33,056 --> 00:07:37,186
, so dass er zu der anderen Komponente navigieren kann.

108
00:07:37,186 --> 00:07:43,246
Gehen wir auf die andere Seite dieser Gleichung.

109
00:07:43,246 --> 00:07:50,466
Wie

110
00:07:50,466 --> 00:07:57,821
ruft eine Komponente, wie die dishdetail-Komponente in diesem Beispiel, diesen Wert ab, der als Token im URL-Link angegeben ist?

111
00:07:57,821 --> 00:08:02,789
Jetzt stellt die Angular Router-Bibliothek

112
00:08:02,789 --> 00:08:07,940
einen Dienst bereit, der als ActivatedRoute-Dienst bezeichnet wird.

113
00:08:07,940 --> 00:08:12,913
Dieser ActivatedRoute-Dienst kann genutzt werden, um

114
00:08:12,913 --> 00:08:14,360
diese Werte abrufen zu können.

115
00:08:14,360 --> 00:08:18,556
Um diesen Parameterabruf zu erleichtern,

116
00:08:18,556 --> 00:08:22,689
bietet der ActivatedRoute-Dienst nun drei verschiedene Dinge.

117
00:08:22,689 --> 00:08:29,140
Beispielsweise stellt es diese Methode zum Abrufen der URL bereit.

118
00:08:29,140 --> 00:08:32,198
Welches ist eine beobachtbare der Route Pfad.

119
00:08:32,198 --> 00:08:37,085
Was als ein Array von Strings für jeden Routenpfad dargestellt wird.

120
00:08:37,085 --> 00:08:39,271
Sie haben dieses Wort hier beobachtbar gefunden.

121
00:08:39,271 --> 00:08:41,770
Halten Sie sich im Moment an diesem Wort fest.

122
00:08:41,770 --> 00:08:46,250
Wir werden zurückkommen, schauen, was ein Beobachtbares im nächsten Modul ist.

123
00:08:46,250 --> 00:08:49,190
Aber im Moment haben wir erkannt, dass dieser

124
00:08:49,190 --> 00:08:52,430
ActivatedRoute-Dienst dies beobachtbar bietet.

125
00:08:53,970 --> 00:08:58,920
In ähnlicher Weise stellt der ActivatedRoute-Dienst auch eine andere beobachtbare namens params bereit.

126
00:08:58,920 --> 00:09:03,920
Diese Parameter beobachtbaren stellt einer Komponente

127
00:09:03,920 --> 00:09:07,990
die Parameterwerte zur Verfügung, die als Routenparameter übergeben werden.

128
00:09:07,990 --> 00:09:12,260
Also diese Parameter beobachtbar ist derjenige, den wir verwenden werden,

129
00:09:12,260 --> 00:09:18,290
um diesen Wert innerhalb der dishdetail-Komponente abzurufen.

130
00:09:18,290 --> 00:09:21,860
In der Übung, die dieser Vorlesung folgt, werden Sie die genaue Methode sehen.

131
00:09:21,860 --> 00:09:29,740
Ebenso können Sie Abfrageparameter auch an eine andere Komponente übergeben.

132
00:09:29,740 --> 00:09:33,185
Jetzt werden wir uns nicht mit einem Beispiel der Abfrageparameter beschäftigen.

133
00:09:33,185 --> 00:09:39,480
Später können wir jedoch ein Beispiel dafür finden, wie Sie

134
00:09:39,480 --> 00:09:46,010
Abfrageparameter über den ActivatedRoute-Dienst an eine andere Komponente übergeben können.

135
00:09:46,010 --> 00:09:50,870
Mit diesem Verständnis gehen wir zur nächsten Übung.

136
00:09:50,870 --> 00:09:54,790
Wir werden die einseitige Anwendung weiter entwickeln.

137
00:09:54,790 --> 00:09:59,517
Aktivieren Sie dann die Verwendung eines Routenparameters, um

138
00:09:59,517 --> 00:10:03,605
die ID eines Gerichts an die dishdetail-Komponente zu übergeben.

139
00:10:03,605 --> 00:10:09,990
Damit die dishdetail Komponente wiederum diese ID verwenden kann, um den Geschirrservice abzufragen.

140
00:10:09,990 --> 00:10:14,280
Um die Details dieses speziellen Gerichts

141
00:10:14,280 --> 00:10:17,406
zu erhalten, das es in seiner Ansicht anzeigen soll.

142
00:10:17,406 --> 00:10:24,269
( MUSIK)