如何跨多个组件共享通用功能

Question

我正在重建一个我为新的 Angular 5 框架构建的 AngularJS 应用程序。我承认我对 Typescript 和边走边学不太熟悉。

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

Common.service.ts

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

@Injectable()
export class CommonService {

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

  constructor() { }

}

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

Share-Buttons.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() { }
}

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

使用带有private（或public）关键字的构造函数注入服务会为服务创建一个局部变量。在这种情况下，您可以通过this.serviceName、this.commonService 访问服务中的所有公共函数和属性。