依赖项注入(DI)是角度2+的核心概念,允许一个类从另一个类接收依赖项。在大多数情况下,依赖项注入是通过将服务类注入组件或模块类来完成的。
例如,下面是如何定义可注入服务的。请特别注意突出显示的部分:
服务:popcorn.service.ts
1import { Injectable } from '@angular/core';
2
3@Injectable()
4export class PopcornService {
5 constructor() {
6 console.log("Popcorn has been injected!");
7 }
8 cookPopcorn(qty) {
9 console.log(qty, "bags of popcorn cooked!");
10 }
以下是如何将我们的爆米花服务注入组件中:
组件:app.Component.ts
1import { Component } from '@angular/core';
2import { PopcornService } from './popcorn.service';
3
4@Component({
5 selector: 'app-root',
6 templateUrl: './app.component.html',
7 styleUrls: ['./app.component.css'],
8 providers: [PopcornService]
9})
10export class AppComponent {
11 constructor(private popcorn: PopcornService) {}
12 cookIt(qty) {
13 this.popcorn.cookPopcorn(qty);
14 }
模板中的cookIt()方法调用注入服务中的cookPopcorn()方法。让我们在模板中使用cookIt()方法:
模板: app.component.html
1<input type="number" #qty placeholder="How many bags?">
2<button type="button" (click)="cookIt(qty.value)">
3 Cook it!
4</button>