在组件中调用Angular服务的函数。

21 浏览
0 Comments

在组件中调用Angular服务的函数。

我知道你可以通过一个组件在服务中触发事件，从而使两个无关的组件之间进行通信，另一个组件可以在服务中订阅该事件。

我的问题是：

服务是否可以直接调用组件中的函数？

0

2 答案

0 Comments

问题出现的原因是没有在app.module的providers数组中添加服务，解决方法是将服务添加到providers数组中，并在组件中注入该服务。代码如下：

({
    declarations: [MyComponent],
    imports: [],
    providers: [MyService],
    bootstrap: [AppComponent]
})

然后在组件中注入该服务：

import { Component } from '/core'
import { MyService } from './path/to/my.service'
...
export class MyComponent {
    constructor(private myService:MyService){}
}

0
0 Comments

问题的出现原因是：默认情况下，Angular中的服务（service）只是类的实例，没有关于组件（component）的任何信息。因此，在组件中调用服务的函数时，服务实例无法直接与组件进行通信。

解决方法是：在服务中添加一个Observable，并在组件中订阅它。这样，当Observable发出新的值时，服务会"调用"组件中的方法。

具体的解决步骤如下：

1. 在服务中定义一个Observable，例如：someObservable。

2. 在组件的构造函数中注入该服务，并订阅该Observable，例如：myService.someObservable.subscribe(value => doSomething(value))。

3. 在组件中定义doSomething方法，用于处理Observable发出的值。

需要注意的是，确保在组件中注入的服务和其他地方的服务引用的是同一个对象，否则组件将无法响应服务的事件。可以通过在公共父级（如AppComponent）或在bootstrap()中提供服务来实现这一点。

另外，使用Subject而不是Observer/Obervable可能是更好的解决方案。具体可以参考这个链接：github.com/Reactive-Extensions/RxJS/blob/master/doc/api/…。

请注意，提供服务的代码中也需要包含someObservable的实现。

0