javascript - 如何跨多个组件共享公共(public)功能

Question

我正在努力重建我为新的 Angular 5 框架构建的 AngularJS 应用程序。我承认我不太熟悉 Typescript 和学习。

我正在尝试在 AngularJS 中重新创建一个等效的服务。我有许多需要我通过多个组件访问的常用功能。因此，通过 Angular CLI，我使用了以下命令:ng generate service Common。然后我添加了一个测试函数并尝试将服务注入(inject)我的组件并尝试调用它。我收到一条错误消息，提示找不到名称 ServiceTest。

通用服务.ts

import { Injectable } from '@angular/core';

@Injectable()
export class CommonService {

  public ServiceTest(data) {
    console.log(data)
  }

  constructor() { }

}

然后我创建了一个如下所示的组件:

分享按钮.Components.ts

import { Component, OnInit } from '@angular/core';
import { CommonService } from '../../common.service';


@Component({
  selector: 'app-shared-buttons',
  templateUrl: './shared-buttons.component.html',
  styleUrls: ['./shared-buttons.component.css']
})
export class SharedButtonsComponent implements OnInit {

  public params: any;

  agInit(params: any): void {
    this.params = params;
  }

  public invokeServiceTest() {
    ServiceTest(this.params.data);
  }

  constructor() { }

  ngOnInit() {
  }

在我的 aoo.modules 中，服务在我的提供者中，如下所示:

  providers: [CommonService],

我错过了什么吗？

Answer 1

为了使用服务，您需要在组件中执行以下操作:

import { Component, OnInit } from '@angular/core';
import { CommonService } from '../../common.service';


@Component({
  selector: 'app-shared-buttons',
  templateUrl: './shared-buttons.component.html',
  styleUrls: ['./shared-buttons.component.css']
})
export class SharedButtonsComponent implements OnInit {

  public params: any;

  agInit(params: any): void {
    this.params = params;
  }

  public invokeServiceTest() {
    this.commonService.ServiceTest(this.params.data);
  }

  constructor(private commonService: CommonService) { }

  ngOnInit() { }
}

如您所见，服务是通过构造函数注入(inject)的。然后，在 invokeServiceTest 中调用服务函数。

使用带有private(或public)关键字的构造函数注入(inject)服务会为服务创建一个局部变量。然后，您可以通过 this.serviceName 访问服务中的所有公共(public)函数和属性，在本例中为 this.commonService。