如何从其他组件访问this.facebookService

Question

我想访问其他组件内部的facebook服务。

这就是我在 app.component.ts

中初始化Facebook服务的方式

import { FacebookService } from 'ngx-facebook';
export class AppComponent implements OnInit, OnDestroy, AfterViewInit {
    constructor(
        @Inject(PLATFORM_ID) private platformId,
        private facebookService: FacebookService,
    ) {}
    ngOnInit() {
        this.facebookService.init(initParams);
    }
}

现在我想从另一个组件访问this.facebookService

所以我可以做这样的事情

在组件 hello.ts

中

dosomething(){
  this.facebookService.CustomerChat.showDialog()
}

我遇到错误，无法读取未定义的属性showDialog（）。

Answer 1

## create a shared service.

import { Injectable } from '@angular/core';
import { FacebookService } from 'ngx-facebook';


@Injectable({
  providedIn: 'root'
})
export class SharedService {

  public get faceBookService() {
    return this._facebookService;
  }

  constructor(private _facebookService: FacebookService) { 

  }

  public initFacebook(initParams: any) {
    this._facebookService.init(initParams);
  }

}

然后在您的组件中导入此共享服务。

import { SharedService } from './services/shared.service.ts';

export class AppComponent implements OnInit, OnDestroy, AfterViewInit {

    constructor(
        @Inject(PLATFORM_ID) private platformId,
        private _sharedService: SharedService,
    ) {}

    ngOnInit() {
        this._sharedService.facebookService.init(initParams);
    }
}

Answer 2

似乎您是Angular的新手。通常，您可以通过将服务注入组件构造器中来访问服务。

import { FacebookService } from 'ngx-facebook';
export class MyComponent {

    constructor(private fb: FacebookService) {}

    callSomeFbMethod() {
       this.fb.someMethod();
    }
}

还必须确保将要注入的服务也注入到providers中的app.module.ts或组件所依赖的模块中。如果您使用的是第三方库（例如ngx-facebook），则可能必须导入库模块而不是服务。

import { FacebookModule } from 'ngx-facebook';

@NgModule({
  ...
  imports: [
    FacebookModule.forRoot()
  ],
  ...
})
export class AppModule { }

如果您创建自己的服务，则可以这样导入它：

import { MyService } from 'services/my-service';

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

Answer 3

由于Angular服务基本上是Singletons（即，无论您在应用程序中的哪个位置，都只有一个服务实例），因此您可以从任何组件中访问它们，只需将它们注入到组件的构造函数中即可。