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.

  • 相关阅读:
    C#中的委托(转)
    面试总结
    int, Int32.Parse和Convert.ToInt32的不同之处(分享)
    数据结构与算法基础学习(一)
    SVN服务器搭建和使用(二)
    WCF学习笔记(第一天,1.WCF概述)
    在此计算机中仅有部分visual studio2010产品已升级到SP1,只有全部升级,产品才能正常运行解决办法
    FormsAuthentication使用指南
    Why do I get the error "The target GatherAllFilesToPublish does not exist"?
    非彼拉且数列的实现
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6839075.html
Copyright © 2011-2022 走看看