116. Using Services for Cross-Component Communication

Jul 15, 2026 04:43 · 4:07 · English · Whisper Turbo · 1 ໄມໂຄຣໂຟນ

ບົດບັນທຶກນີ້ຈະໝົດອາຍຸໃນມື້ນີ້. ປັບປຸງໃຫ້ເປັນບ່ອນເກັບທີ່ບໍ່ປ່ຽນແປງ →

ລາຍການສອນ

0:02

S… Speaker 1 (116. Using Services for Cross-Component Communication)

We talked a lot about services in this module.

0:05

S… Speaker 1 (116. Using Services for Cross-Component Communication)

And I hope you saw how services can clean our app up,

0:09

S… Speaker 1 (116. Using Services for Cross-Component Communication)

make the code a bit leaner,

0:10

S… Speaker 1 (116. Using Services for Cross-Component Communication)

more centralized,

0:11

S… Speaker 1 (116. Using Services for Cross-Component Communication)

easier to maintain.

0:13

S… Speaker 1 (116. Using Services for Cross-Component Communication)

You don't have to build these complex output input

0:17

S… Speaker 1 (116. Using Services for Cross-Component Communication)

chains where you pass events and properties to get data

0:21

S… Speaker 1 (116. Using Services for Cross-Component Communication)

from component A to component B.

0:23

S… Speaker 1 (116. Using Services for Cross-Component Communication)

It's much leaner now.

0:25

S… Speaker 1 (116. Using Services for Cross-Component Communication)

Let me show you how much we actually saved.

0:30

S… Speaker 1 (116. Using Services for Cross-Component Communication)

Let's say that if we click on the button here in the account component,

0:34

S… Speaker 1 (116. Using Services for Cross-Component Communication)

for some reason,

0:37

S… Speaker 1 (116. Using Services for Cross-Component Communication)

we want to output something in the new account component.

0:41

S… Speaker 1 (116. Using Services for Cross-Component Communication)

Normally,

0:42

S… Speaker 1 (116. Using Services for Cross-Component Communication)

without services,

0:43

S… Speaker 1 (116. Using Services for Cross-Component Communication)

we would have to emit an event in the account component

0:48

S… Speaker 1 (116. Using Services for Cross-Component Communication)

that something was clicked or something happened so that we changed the status,

0:51

S… Speaker 1 (116. Using Services for Cross-Component Communication)

for example.

0:52

S… Speaker 1 (116. Using Services for Cross-Component Communication)

We would have to catch the event here in app account.

0:56

S… Speaker 1 (116. Using Services for Cross-Component Communication)

As a side note,

0:57

S… Speaker 1 (116. Using Services for Cross-Component Communication)

we can of course remove these events here.

0:59

S… Speaker 1 (116. Using Services for Cross-Component Communication)

They aren't triggered anymore.

1:02

S… Speaker 1 (116. Using Services for Cross-Component Communication)

So we would have to catch these events here.

1:04

S… Speaker 1 (116. Using Services for Cross-Component Communication)

And then we would have to pass the new data

1:09

S… Speaker 1 (116. Using Services for Cross-Component Communication)

down via property binding to the component

1:13

S… Speaker 1 (116. Using Services for Cross-Component Communication)

where we want to handle it.

1:14

S… Speaker 1 (116. Using Services for Cross-Component Communication)

Pretty complicated.

1:16

S… Speaker 1 (116. Using Services for Cross-Component Communication)

And building these chains of property and event binding is not the most convenient

1:20

S… Speaker 1 (116. Using Services for Cross-Component Communication)

way of writing code.

1:21

S… Speaker 1 (116. Using Services for Cross-Component Communication)

It's so much easier with services.

1:24

S… Speaker 1 (116. Using Services for Cross-Component Communication)

Let's say in our account service here.

1:26

S… Speaker 1 (116. Using Services for Cross-Component Communication)

we want to provide some event which we can trigger

1:31

S… Speaker 1 (116. Using Services for Cross-Component Communication)

in one component and listen to in another.

1:33

S… Speaker 1 (116. Using Services for Cross-Component Communication)

So we could simply add the status

1:37

S… Speaker 1 (116. Using Services for Cross-Component Communication)

updated event,

1:38

S… Speaker 1 (116. Using Services for Cross-Component Communication)

which could be a new event emitter,

1:41

S… Speaker 1 (116. Using Services for Cross-Component Communication)

which we import from addAngularCore.

1:45

S… Speaker 1 (116. Using Services for Cross-Component Communication)

So make sure to add this import at the top,

1:48

S… Speaker 1 (116. Using Services for Cross-Component Communication)

which will pass on the new event,

1:51

S… Speaker 1 (116. Using Services for Cross-Component Communication)

excuse me,

1:52

S… Speaker 1 (116. Using Services for Cross-Component Communication)

the new status,

1:53

S… Speaker 1 (116. Using Services for Cross-Component Communication)

so a string.

1:54

S… Speaker 1 (116. Using Services for Cross-Component Communication)

And yes,

1:55

S… Speaker 1 (116. Using Services for Cross-Component Communication)

we could trigger it now here in the update status method.

1:58

S… Speaker 1 (116. Using Services for Cross-Component Communication)

But we can also,

1:59

S… Speaker 1 (116. Using Services for Cross-Component Communication)

since we inject the account service here where we set the new status,

2:03

S… Speaker 1 (116. Using Services for Cross-Component Communication)

call account service status updated

2:08

S… Speaker 1 (116. Using Services for Cross-Component Communication)

and emit this with the new status.

2:11

S… Speaker 1 (116. Using Services for Cross-Component Communication)

So now I'm emitting an event I set up in the service.

2:14

S… Speaker 1 (116. Using Services for Cross-Component Communication)

And as a side note,

2:15

S… Speaker 1 (116. Using Services for Cross-Component Communication)

later in the observable section,

2:17

S… Speaker 1 (116. Using Services for Cross-Component Communication)

you will learn about another construct you can use

2:21

S… Speaker 1 (116. Using Services for Cross-Component Communication)

to submit or to emit.

2:24

S… Speaker 1 (116. Using Services for Cross-Component Communication)

You've made events and subscribe to it instead of using the event emitter.

2:28

S… Speaker 1 (116. Using Services for Cross-Component Communication)

But for now,

2:29

S… Speaker 1 (116. Using Services for Cross-Component Communication)

that's absolutely fine.

2:30

S… Speaker 1 (116. Using Services for Cross-Component Communication)

So here we are emitting an event.

2:32

S… Speaker 1 (116. Using Services for Cross-Component Communication)

Again, the event emitter lives in our service.

2:35

S… Speaker 1 (116. Using Services for Cross-Component Communication)

And in the new account,

2:37

S… Speaker 1 (116. Using Services for Cross-Component Communication)

I now want to listen to it.

2:38

S… Speaker 1 (116. Using Services for Cross-Component Communication)

So here,

2:39

S… Speaker 1 (116. Using Services for Cross-Component Communication)

let's say I want to throw an alert.

2:41

S… Speaker 1 (116. Using Services for Cross-Component Communication)

So I will do this in the constructor for now.

2:44

S… Speaker 1 (116. Using Services for Cross-Component Communication)

Access my account service.

2:47

S… Speaker 1 (116. Using Services for Cross-Component Communication)

And now for the status updated event here,

2:49

S… Speaker 1 (116. Using Services for Cross-Component Communication)

I will subscribe to it because event emitter in the end just kind

2:53

S… Speaker 1 (116. Using Services for Cross-Component Communication)

of wraps and observable.

2:55

S… Speaker 1 (116. Using Services for Cross-Component Communication)

So here I could then receive the new status,

2:59

S… Speaker 1 (116. Using Services for Cross-Component Communication)

which I know will be a string.

3:00

S… Speaker 1 (116. Using Services for Cross-Component Communication)

And then I will simply throw an alert where I say new status,

3:03

S… Speaker 1 (116. Using Services for Cross-Component Communication)

status,

3:06

S… Speaker 1 (116. Using Services for Cross-Component Communication)

something like that.

3:07

S… Speaker 1 (116. Using Services for Cross-Component Communication)

So now I'm not building any chain of property

3:11

S… Speaker 1 (116. Using Services for Cross-Component Communication)

and event binding.

3:13

S… Speaker 1 (116. Using Services for Cross-Component Communication)

I do have cross -component communication through

3:17

S… Speaker 1 (116. Using Services for Cross-Component Communication)

a service with the event emitter.

3:19

S… Speaker 1 (116. Using Services for Cross-Component Communication)

And you can see this,

3:21

S… Speaker 1 (116. Using Services for Cross-Component Communication)

if I click a button here,

3:22

S… Speaker 1 (116. Using Services for Cross-Component Communication)

they actually got opened on another window,

3:25

S… Speaker 1 (116. Using Services for Cross-Component Communication)

but you see,

3:26

S… Speaker 1 (116. Using Services for Cross-Component Communication)

this alert was thrown with the new status unknown.

3:29

S… Speaker 1 (116. Using Services for Cross-Component Communication)

Same here,

3:31

S… Speaker 1 (116. Using Services for Cross-Component Communication)

inactive.

3:31

S… Speaker 1 (116. Using Services for Cross-Component Communication)

Active.

3:33

S… Speaker 1 (116. Using Services for Cross-Component Communication)

So now we're communicating between components through a service,

3:37

S… Speaker 1 (116. Using Services for Cross-Component Communication)

which really can save you a lot of time.

3:40

S… Speaker 1 (116. Using Services for Cross-Component Communication)

And with that,

3:41

S… Speaker 1 (116. Using Services for Cross-Component Communication)

I hope you saw a lot of reasons why services can be very helpful and

3:45

S… Speaker 1 (116. Using Services for Cross-Component Communication)

how you can use them to your advantages.

3:47

S… Speaker 1 (116. Using Services for Cross-Component Communication)

Make sure to use the right amount of instances.

3:50

S… Speaker 1 (116. Using Services for Cross-Component Communication)

And if you inject services into services,

3:53

S… Speaker 1 (116. Using Services for Cross-Component Communication)

make sure to provide the service on the app module level and to

3:57

S… Speaker 1 (116. Using Services for Cross-Component Communication)

add add injectable to the service where you want to inject it in.

4:02

S… Speaker 1 (116. Using Services for Cross-Component Communication)

Let's move on to some assignments now.

ບົດບັນທຶກນີ້ໄດ້ຖືກສ້າງຂຶ້ນໂດຍ AI (ການຮັບຮູ້ການເວົ້າແບບອັດຕະໂນມັດ). ອາດມີຂໍ້ຜິດພາດ - ກວດສອບກັບສຽງຕົ້ນຕໍເພື່ອໃຊ້ຢ່າງຮີບດ່ວນ. ນະໂຍບາຍ AI

❤️ ຮັກ STT.ai? ເວົ້າກັບເພື່ອນຂອງທ່ານ!

ສັງລວມ

ກົດປຸ່ມສັງລວມ ເພື່ອສ້າງບົດສັງລວມ AI ຂອງບົດບັນທຶກນີ້.

ຖາມ AI ກ່ຽວກັບການແປນີ້

ຖາມທຸກຢ່າງກ່ຽວກັບບົດບັນທຶກນີ້ - AI ຈະຊອກຫາສ່ວນທີ່ກ່ຽວຂ້ອງແລະຕອບ.

ແປເປັນພາສາອື່ນ

116. Using Services for Cross-Component Communication

ສັງລວມ

ຖາມ AI ກ່ຽວ​ກັບ​ການ​ແປ​ນີ້

ຖາມ AI ກ່ຽວກັບການແປນີ້