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.

  • 相关阅读:
    面向对象与原型2---原型
    JavaScript 引用【转】
    面向对象与原型1---创建对象的方法
    匿名函数和闭包(下)
    从输入 URL 到页面加载完的过程中都发生了什么事情?
    匿名函数和闭包(上)
    聚美优品前端开发面试题
    hdoj1045 Fire Net(二分图最大匹配)
    hdoj1180 诡异的楼梯(bfs+奇偶判断)
    hdoj1373 Channel Allocation(极大团)
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6839075.html
Copyright © 2011-2022 走看看