122. Using a Service for Cross-Component Communication

Jul 15, 2026 05:14 · 5:07 · English · Whisper Turbo · 2 Дынамік
Гэты запіс скончыцца сёння. Абнавіць для пастаяннага захоўвання →
Індэкс лекцыі
Толькі паказ
0:02
S… Speaker 1 (122. Using a Service for Cross-Component Communication)
In the last lecture,
0:03
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
we used our recipe service,
0:04
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
and we created it in the first place,
0:06
S… Speaker 1 (122. Using a Service for Cross-Component Communication)
we filled it with some live,
0:07
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
to manage our recipes in a central place.
0:10
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
That is working great.
0:11
S… Speaker 1 (122. Using a Service for Cross-Component Communication)
Now,
0:12
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
let's use the service to improve our app.
0:16
S… Speaker 1 (122. Using a Service for Cross-Component Communication)
Remember,
0:17
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
we have this long chain of inputs and outputs getting
0:21
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
a selected item from the recipe item component over the
0:25
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
recipe list component to the recipes component here
0:29
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
where we listen to that event and then all the way down using
0:33
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
the selected recipe property to the recipe detail component.
0:36
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
So this cross component communication.
0:39
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
That is a super long way for just informing
0:43
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
another component
0:45
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
that we selected an item.
0:46
S… Speaker 1 (122. Using a Service for Cross-Component Communication)
We can do better,
0:48
S… Speaker 1 (122. Using a Service for Cross-Component Communication)
and we should.
0:49
S… Speaker 1 (122. Using a Service for Cross-Component Communication)
So what my goal is,
0:51
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
that in the recipe item component,
0:53
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
where we have this on selected click,
0:57
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
that here we can directly inform the recipe detail
1:01
S… Speaker 1 (122. Using a Service for Cross-Component Communication)
component.
1:01
S… Speaker 1 (122. Using a Service for Cross-Component Communication)
So in on click,
1:03
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
what I actually want to do here is,
1:05
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
I want to not emit an event here,
1:08
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
I will get rid of it here,
1:09
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
and therefore I can remove the imports of output and event meter.
1:14
S… Speaker 1 (122. Using a Service for Cross-Component Communication)
Instead here,
1:15
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
I want to call some method in my service,
1:18
S… Speaker 1 (122. Using a Service for Cross-Component Communication)
which will then,
1:20
S… Speaker 1 (122. Using a Service for Cross-Component Communication)
well,
1:20
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
transfer this data for me.
1:22
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
So in the recipe service,
1:25
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
I'll add a new property,
1:27
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
a public property,
1:28
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
which will name recipe selected.
1:30
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
Of course,
1:30
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
you could choose a different name.
1:32
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
It will be an object instantiated by using
1:36
S… Speaker 1 (122. Using a Service for Cross-Component Communication)
event emitter.
1:38
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
from AngularCore,
1:38
S… Speaker 1 (122. Using a Service for Cross-Component Communication)
so you need to add this import.
1:40
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
Let's put it at the top of the file.
1:42
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
That's kind of a good practice to do with your Angular imports.
1:45
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
It will hold some recipe data,
1:48
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
and that's all I want to do in the recipe service.
1:51
S… Speaker 1 (122. Using a Service for Cross-Component Communication)
With this setup,
1:53
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
and of course,
1:54
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
you could also encapsulate this by providing a method to get access to it and want to emit
1:58
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
the event, but I will use the property itself.
2:02
S… Speaker 1 (122. Using a Service for Cross-Component Communication)
So by adding this,
2:03
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
I can now go back to my recipe item component and then on selected,
2:08
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
I want to do something with that property in the recipe service.
2:12
S… Speaker 1 (122. Using a Service for Cross-Component Communication)
So first of all,
2:13
S… Speaker 1 (122. Using a Service for Cross-Component Communication)
let's inject it.
2:14
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
Let's inject the recipe service as you learn to do it.
2:17
S… Speaker 1 (122. Using a Service for Cross-Component Communication)
Make sure to import it,
2:19
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
pointing to the recipe service file in the right folder.
2:23
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
And then on the recipe service,
2:24
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
we can use this recipe selected event emitter and
2:29
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
call emit and emit the recipe of this
2:33
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
recipe item component because that is the one we selected.
2:36
S… Speaker 1 (122. Using a Service for Cross-Component Communication)
And that's the data we want to pass.
2:38
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
Now with this trick or with this approach,
2:42
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
we can go to the recipe list component and remove
2:46
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
this listener where we listened to whether we did select it or not.
2:51
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
We can get rid of the onRecipesSelected code and get rid of our
2:55
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
own emitted event here.
2:57
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
So we're already saving a lot of code,
2:59
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
get rid of all these imports,
3:00
S… Speaker 1 (122. Using a Service for Cross-Component Communication)
which we don't need anymore.
3:01
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
And in the recipes component HTML file,
3:05
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
we can also get rid of this event here on the recipe list because we
3:09
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
no longer use this chain of data to pass it around.
3:13
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
And now all I want to do is in this component here,
3:16
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
I want to listen to this event in the recipe service
3:20
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
so that I can now correctly decide whether we do have a selected
3:25
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
recipe and should therefore render the detail component or if we should still
3:29
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
show this template with this please select a recipe text.
3:32
S… Speaker 1 (122. Using a Service for Cross-Component Communication)
Therefore,
3:33
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
I will inject the service here too.
3:37
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
Recipe service and since I provide the recipe service on this component
3:41
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
This component and all the other components in this recipe folder use
3:45
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
the same instance of the service which of course is super important Otherwise
3:49
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
the service where I emit the event would be a different one to the one
3:53
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
I listen to it So I would never get informed about the event,
3:57
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
but here it will work because we're using the same instance
4:01
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
So here,
4:02
S… Speaker 1 (122. Using a Service for Cross-Component Communication)
in ngOnInit,
4:03
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
for example, I can set up my listener.
4:06
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
So on the recipe selected,
4:09
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
I can subscribe to it and get informed about any changes.
4:13
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
And now here,
4:15
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
I know I will receive some data,
4:18
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
which is of type recipe,
4:19
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
because that's how we configure the eventimeter.
4:21
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
It will give us a recipe.
4:23
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
And in this ES6 arrow function here,
4:27
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
that is the argument list,
4:29
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
and here is the function body.
4:31
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
Here I simply want to set this selected recipe equal
4:35
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
to the recipe we got with the event and with
4:40
S… Speaker 1 (122. Using a Service for Cross-Component Communication)
that we should get the same behavior as before
4:44
S… Speaker 1 (122. Using a Service for Cross-Component Communication)
if we reload the app but now
4:47
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
having a much leaner approach of using a service
4:51
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
for cross -component communication,
4:54
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
which of course makes it much easier to pass this data as
4:58
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
you saw, and we don't have to build this complex chain of
5:02
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
event and property binding.

Гэты тэкст быў створаны AI (аўтаматычнае вызначэнне мовы). Можа ўтрымліваць памылкі - праверце з арыгінальным гукам для выкарыстання. Палітыка AI

❤️ Любіш STT.ai? Раскажы сваім сябрам!
Кароткае апісанне
Націсніце "Сумаваць", каб стварыць падрабязнае апісанне гэтага транскрыпту.
Падрыхтоўка...
Запытаць у AI пра гэты пераклад
Запытайцеся пра што-небудзь з гэтага перакладу — машынны інтэлект знойдзе адпаведныя раздзелы і адкажа.
Перапісаць іншае