Angular中的依赖注入

依赖注入 (DI) 是 Angular 2+ 的核心概念，它允许一个类从另一个类接收依赖项。 大多数情况下，在 Angular 中，依赖注入是通过将服务类注入到组件或模块类中来完成的。

例如，您将如何定义可注入服务。 特别注意突出显示的部分：

服务：popcorn.service.ts

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

@Injectable()
export class PopcornService {
  constructor() {
    console.log("Popcorn has been injected!");
  }
  cookPopcorn(qty) {
    console.log(qty, "bags of popcorn cooked!");
  }

下面是如何将我们的 Popcorn 服务注入到组件中：

组件：app.component.ts

import { Component } from '@angular/core';
import { PopcornService } from './popcorn.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [PopcornService]
})
export class AppComponent {
  constructor(private popcorn: PopcornService) {}
  cookIt(qty) {
    this.popcorn.cookPopcorn(qty);
  }

模板中的cookIt()方法调用注入服务中的cookPopcorn()方法。 让我们在模板中使用我们的 cookIt() 方法：

模板：app.component.html

<input type="number" #qty placeholder="How many bags?">
<button type="button" (click)="cookIt(qty.value)">
  Cook it!
</button>