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.

यह व्याख्या एआई (अंग्रेजी भाषा की पहचान के द्वारा तैयार की गयी थी ।) एआई नीति

❤️ क्या आपको STT.ai पसंद है? अपने दोस्तों को बताइए!

सारांश

इस बुक का एआई सारांश बनाने के लिए सार बनाने के लिए सार को क्लिक करें.

एआई के बारे में पूछें इस ट्रांसमिशन के बारे में

इस हस्तलिपि के बारे में कुछ सवाल पूछिए — एआई को ज़रूरी भागों और जवाब मिलेगा ।

एक और अनुवाद