提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

[Angular] Using useExisting provider

Angular Using Provider
2023-09-14 08:59:18 时间

Unlike 'useClass', 'useExisting' doesn't create a new instance when you register your service inside ngmodule.

'useExisting' also can limit the function call, for example:

import { Injectable, Inject } from '@angular/core';
import { Http } from '@angular/http';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Injectable()
export class FoodService {
  constructor(
    private http: Http
  ) {
  }
  getSides(): Observable<any[]> {
    return this.http.get('/api/sides')
      .map(response => response.json());
  }
  getPizzas(): Observable<any[]> {
    return this.http.get('/api/pizzas')
      .map(response => response.json());
  }
  getDrinks(): Observable<any[]> {
    return this.http.get('/api/drinks')
      .map(response => response.json());
  }
}

We have a service which has three methods 'getSides', 'getPizzas' & 'getDrinks'. 

 

Inside one of component, we use 'useExisting' to create an abstract class 'DrinkService', which return include one methods which 'DrinkService' needs -- getDrinks()

import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http';

import { Observable } from 'rxjs/Observable';

import { FoodService } from '../food.service';

interface Drink {
  name: string,
  price: number
}

export abstract class DrinkService {
  getDrinks: () => Observable<Drink[]>;
}

@Component({
  selector: 'drink-viewer',
  providers: [
    { provide: DrinkService, useExisting: FoodService }
  ],
  template: `
    <div>
      <div *ngFor="let item of items$ | async">
        {{ item.name }} {{ item.price | currency:'USD':true }}
      </div>
    </div>
  `
})
export class DrinkViewerComponent implements OnInit {
  items$: Observable<Drink[]>;
  constructor(private foodService: DrinkService) {}
  ngOnInit() {
    this.items$ = this.foodService.getDrinks();
  }
}

 

This can help TypeScript to limit the methods available to our Drink component, because in drink component, we don't need 'getPizzas' or 'getSides'. But this is just compile checking, it will still call the methods 'getPizzas' or 'getSides' during run time.

相关文章