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

【问题标题】：Angular service call function in component组件中的角度服务调用函数
【发布时间】：2016-07-18 12:22:57
【问题描述】：

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

我的问题：

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

【问题讨论】：

如果您的服务中有对组件的引用，当然可以。但我不推荐这两个类相互引用。
所以基本上事件抛出和订阅方法是最佳实践？
明确。你可以通过观察者来做到这一点。您希望将其分开以保持关注点的分离。 Günter 的答案似乎是正确的。

标签： angular angular2-services

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

【讨论】：

必须确保组件中注入的MyService和其他地方的MyService引用的是同一个对象。否则，组件将无法响应 MyService 的事件。
也就是说，不是直接在组件上而是在公共父级（或AppComponent，它是整个应用程序的公共父级，或在bootstrap()）上提供它
你是对的。我只是注意到别人。你会得到一个很好的解决方案。
更好的解决方案是使用 Subject 而不是 Observers/ables。 github.com/Reactive-Extensions/RxJS/blob/master/doc/api/…
如果您的代码也提供someObservable代码服务会更有帮助

【解决方案2】：

上面的答案是正确的，除了你不引导你的服务，你将把你的服务添加到 app.module 的 providers 数组中。

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

}

【讨论】：