Question

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

我的问题：

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

Answer 1

默认不是。服务是类的实例，仅此而已。

@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发出另一个值时，服务会“调用”该组件上的方法。

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

Answer 2

上面的答案是正确的，除非你没有引导你的服务，你将在app.module的provider数组中添加你的服务。

@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){}

}

组件中的角度服务调用函数

2 个答案: