如何在 Angular 6 组件中注入服务？

Service 是 Angular 中的一个特殊类，主要用于组件间通信。有时有些组件需要一个公共池来相互交互，主要用于数据或信息采购。服务使之成为可能。这两个（或更多）组件可能相互关联，也可能不相互关联。这意味着可能存在父子关系或根本不存在。

服务和其他依赖项直接注入到组件的构造函数中，如下所示：

constructor(private _myService: MyService) {
}

通过这样做，我们实际上是在创建服务的一个实例。这意味着我们必须访问服务的所有公共变量和方法。

要创建新服务，我们可以使用代码脚手架工具：

// Generate service
ng g s my-custom-service

将服务注入组件非常简单。假设我们有一个名为MyCustomService的服务。这就是我们如何将它注入到组件中：

MyCustomComponent.ts

import {...} from "@angular/core";
import { MyCustomService } from "../...PATH";
  
@Component({
  selector: "...",
  templateUrl: "...",
  styleUrls: ["..."],
})
export class MyCustomComponent {
  
    // INJECTING SERVICE INTO THE CONSTRUCTOR
    constructor(private _myCustomService: MyCustomService) {}
    
      // USING THE SERVICE MEMBERS
    this._myCustomService.sampleMethod();
}

除非我们把手弄脏，否则这可能没有任何意义。所以让我们快速创建一个服务，看看它是如何被注入的，并且可以很容易地访问。对于这个演示，我们将创建两个简单的自定义组件。比方说，女士们，先生们。这两个组件之间没有父子关系。两者都是绝对独立的。男士们只需点击一下按钮，就会向女士们打招呼“早上好”。为此，我们将使用将在两个组件之间进行交互的服务。我们将其称为InteractionService。

首先，我们将创建 2 个组件和 1 个服务。

现在我们拥有了我们需要的一切。因为这个演示特别适用于服务注入。我们不会详细讨论这些组件。让我们先从服务开始。这是代码：

交互服务.ts

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
  
@Injectable({
  providedIn: 'root'
})
export class InteractionService {
  private _messageSource = new Subject();
    
  greeting$=this._messageSource.asObservable();
    
  sendMessage(message: string) {
    this._messageSource.next(message);
  }
}

这已经完成了。我们现在将把这个服务注入到我们的两个组件中。

绅士.component.html

  
      
  
  
      
Welcome To GFG
      Greet
  

我们现在将使用以下方法创建第一个组件：

// Generate component
ng g c gentlemen

绅士组件.ts

import {...} from "@angular/core";
...
import { InteractionService } from "../services/interaction.service";
  
@Component({
  selector: "app-gentlemen",
  templateUrl: "./gentlemen.component.html",
  styleUrls: ["./gentlemen.component.scss"],
})
export class GentlemenComponent {
  
  // SERVICE INJECTION
  constructor(private _interactionService: InteractionService) {}
  
  greetLadies() {
    this._interactionService.sendMessage("Good morning");
  }
}

快速创建我们的最后一个组件：

// Generate component
ng g c ladies

女士组件.ts

import {...} from "@angular/core";
...
import { InteractionService } from "../services/interaction.service";
  
@Component({
  selector: "app-ladies",
  templateUrl: "./ladies.component.html",
  styleUrls: ["./ladies.component.scss"],
})
export class LadiesComponent implements OnInit {
    
  // SERVICE INJECTION
  constructor(private _interactionService: InteractionService) {}
  
  ngOnInit() {
    this._interactionService.greeting$.subscribe(message => {
      console.log(message);
    })
  }
}

这就是我们可以注入和使用服务在组件之间进行交互的方式。我们刚刚看到了一个服务注入的用例。

我们将把它作为我们的最终产品：

UI/UX 截图

单击按钮时，我们可以期待以下输出：

预期产出