Angular services : selecting the correct url on click event

问题

I am trying to figure out or to make my services to get the correct url on event.the case is that I have a template with multiple tab and each one display a set of data on event binding , this is what it looks like :

 <div  class="card-tabs">
      <ul materialize="tabs" class="tabs tabs-fixed-width" (click)='select()'>
        <li class="tab"><a class="active" href="#west (click)='west()'>{{Department[0]}}</a></li>
        <li class="tab"><a href="#center" (click)='center()'>{{Department[1]}}</a></li>    
      </ul>
    </div>
<div class="card-content grey lighten-4">
    <div id="ouest"><table></table></div>
    <div id="centre"><table></table></div>
</div>

and the embed component template table :

<div id="table_wrappers">
                <table class="bordered highlight" *ngIf='modelInfo && modelInfo.length'>
                    <thead>
                        <tr >
                            <th>First Name</th>
                            <th>Last Name</th>
                            <th>Phone</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor ='let models of modelInfo'>
                            <td>{{models.fname}}</td>
                            <td>{{models.lname}}</td>
                            <td>{{models.phone}}</td>
                        </tr>
                    </tbody>
                </table>
</div>

I have create different event binding methods in the component itself , to detect specific click event, west() and center() is used to set a number variable that will trigger the correct url in the switch .. case statement in the selectUrl() method

import { model } from '../model/imodel';
import { ServiceService } from '../service.service';
import { Component, OnInit } from '@angular/core';

@Component({
  selector : 'table',
  templateUrl: './model.component.html',
  styleUrls: ['./model.component.css'],
  providers : [ServiceService]
})
export class ModelComponent implements OnInit {
    modelInfo : any [];


    modelID : number;
    modelFname : string;
    modelLname : string ;
    modelPhone : string;
    model : Imodel;
    errorMessage : string;
    i : any;
    _Url :string ;

    Departement : string []=["west","center"];

   constructor(private modelService : ServiceService) { }

   selectUrl();

  ngOnInit() {
      this._modelService.getModeInfo()
             .subscribe(models => this.modelInfo = models,
             error => this.errorMessage = <any>error);
  }

  west() : number{
         this.i = 1;
        return this.i;
    }

    center() : number{
         this.i = 2;
        return this.i;
    }


     selectUrl() : string {

      switch(this.i) { 
        case 1: { 
            this._Url ='http://localhost/CRUDSERVICE/api.php/modelWest?transform=1';
            console.log("West selected"); 
            break; 
        } 
        case 2: { 
            console.log("Center Selected");
            this._Url ='http://localhost/CRUDSERVICE/api.php/modelCenter?transform=1'; 
            break; 
        }

        default: { 
            this._Url ='http://localhost/CRUDSERVICE/api.php/modelWest?transform=1'; 

            break; 
        } 
    } 
      return this._Url;
    }

}

and finally an old service model I have test and is working just fine with simple context:

import { model } from './model/imodel';
import { Injectable } from '@angular/core';
import { Http, Response , Headers, RequestOptions} from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map'
import 'rxjs/add/operator/do'
import 'rxjs/add/operator/catch';

@Injectable()
export class ServiceService {

     private _Url : string;

    constructor(private _http : Http){

    }


  getmodelInfo(_url : string) : Observable<Imodel[]>{
    return this._http.get(this._Url)
    .map((response : Response)=><Imodel[]> response.json().model) 
    .do(data => console.log('All '+ JSON.stringify(data)))
    .catch(this.handleError);
  }

    private handleError(error : Response){
            console.error(error);
            return Observable.throw(error.json().error || 'Server Error');
    }  
 }

I hope I explained clearly the problem and I am looking forward for your suggestion, thanks

来源：https://stackoverflow.com/questions/45145874/angular-services-selecting-the-correct-url-on-click-event