Angular 中的依赖注入

依赖项注入(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>
Published At
Categories with 技术
Tagged with
comments powered by Disqus