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.

  • 相关阅读:
    Docker导入容器快照,执行报错:docker: Error response from daemon: No command specified.
    git笔记
    数据库设计
    前端项目--配置上下文
    tomcat启动前端项目
    Nginx配置负载均衡
    Nginx使用
    转载自:StringUtils的常见方法
    转载:String.format()的详细用法
    tomcat配置解决乱码问题
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6839075.html
Copyright © 2011-2022 走看看