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.

  • 相关阅读:
    动态第K大 (树状数组套主席树)
    AC自动机
    开发Jquery插件文字自动截取(提供源代码)
    基于CentOS 5.5,集成LAMP、LNMP精简定制版应用服务器
    MySQL中的mysqldump命令使用详解
    开源CRM和ERP撑起后台系统能走多远
    squid,正向代理,反向代理
    linux架设subversion(svn)版本控制
    浅谈php的urlencode()函数
    读《MYSQL开发者SQL权威指南》笔记
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6839075.html
Copyright © 2011-2022 走看看