Angular组件中的服务调用函数

Question

所以我知道您可以让两个不相关的组件通过服务相互通信，方法是让一个组件在服务中发出事件，而另一个组件在服务中订阅它。

我的问题：

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

Answer 1

默认情况下没有。服务是 class 的一个实例，仅此而已。

@Injectable()
class MyService {
}

@Component({
  selector: 'my-component',
  ...
)}
class MyComponent {
  constructor(private myService:MyService) {}
}

@NgModule({
  providers: [MyService],
  ...
})
export class AppModule {}

通过这种方式，服务 (MyService) 实例会传递给 MyComponent，仅此而已。服务实例不知道 MyComponent。

您可能想要的是向您的服务添加一个 Observable 并在您的组件中订阅它。

@Component({
  selector: 'my-component',
  ...
)}
class MyComponent {
  constructor(myService:MyService) {
    myService.someObservable.subscribe(value => doSomething(value));
  }

  doSomething(value) {
    console.debug(value);
  }
}

这样，当 Observable someObservable 发出另一个值时，服务 "calls" 组件上的一个方法。

有关详细信息，请参阅 detect change of nested property for component input

Answer 2

上面的答案是正确的，除了您没有 bootstrap 您的服务，您将在 app.module.

的提供者数组中添加您的服务

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

然后将服务注入组件

import { Component } from '@angular/core'

import { MyService } from './path/to/my.service'

...

export class MyComponent {

    constructor(private myService:MyService){}

}

Angular组件中的服务调用函数

Angular service call function in component

angular2-services

angular