zoukankan      html  css  js  c++  java
  • [Angular] Using useExisting provider

    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.

  • 相关阅读:
    一些Redis面试题
    PHP中类和对象
    PHP中普通方法和静态方法
    PHP中普通属性和静态属性
    PHP中对象的传值方式
    PHP创建对象的几种形式
    面向对象与面向过程思想区别
    mysql中联合查询
    mysql中用户和权限
    mysql中事务
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6839075.html
Copyright © 2011-2022 走看看