可能有兩個模板在AngularJS單一呼叫服務2

Question

我的服務回報兩個項目的名單，我想呈現每個列表差異選擇

this.http.get(url).map(res => res.json()) 

的JSON返回{ list1: [...], list2: [...] }

和我有兩個<div>呈現list1和list2。

是否可以使用Angular JS 2？

Answer 1

class MyService { 
    private _list1; 
    private _list2; 

    getList1() { 
    if(this._list1) { 
     return Observable.of(this._list1); 
    } else { 
     return _getList(1); 
    } 
    } 

    getList2() { 
    if(this._list2) { 
     return Observable.of(this._list2); 
    } else { 
     return _getList(2); 
    } 
    } 

    private _getList(listNo) { 
    return this.http.get(url).map(res => { 
     var json = res.json(); 
     this._list1 = value.list1; 
     this._list2 = value.list2; 
     if(listNo == 1) { 
     return json.list1; 
     } 
     if(listNo == 2) { 
     return json.list2; 
     } 
    }); 
    } 
} 

@Component({ 
    selector: 'my-component1', 
    pipes: [KeysPipe], 
    template: ` 
    <ul> 
    <li *ngFor="let item of list | keys">{{item.key}} - {{item.value}}</li> 
    </ul> 
` 
}) 
export class MyComponent1 { 
    constructor(private MyService myService) { 
    myService.getList1().subscribe.(value => this.list = value); 
    } 
} 

@Component({ 
    selector: 'my-component2', 
    pipes: [KeysPipe], 
    template: ` 
    <ul> 
    <li *ngFor="let item of list | keys">{{item.key}} - {{item.value}}</li> 
    </ul> 
` 
}) 
export class MyComponent2 { 
    constructor(private MyService myService) { 
    myService.getList2().subscribe.(value => this.list = value); 
    } 
} 

如果你想呈現兩個列表在同一組件可以簡化過程的。

爲KeysPipe看到access key and value of object using *ngFor

Answer 2

我不知道你是怎麼觸發呼籲您的要求。例如，另一個組件。

您還可以在您的服務中定義兩個EventEmitter屬性（每個列表一個），以在您的HTTP調用的響應存在時發出事件。數據在那裏時，兩個組件可以訂閱。

• 服務實現

  export class ListService { 
      list1Event: EventEmitter<any> = new EventEmitter(); 
      list2Event: EventEmitter<any> = new EventEmitter(); 
  
      getLists() { 
      return this.http.get(url).map(res => res.json()) 
       .subscribe(
       (data) => { 
        this.list1Event.emit(data.list1); 
        this.list2Event.emit(data.list2); 
       } 
      ); 
      } 
  } 
  

• 組件＃1實施

  @Component({ 
      selector: 'my-component1', 
      template: ` 
      <ul> 
      <li *ngFor="#item of list">{{item.name}}</li> 
      </ul> 
      ` 
  }) 
  export class MyComponent1 { 
      constructor(private service:ListService) { 
      this.service.list1Event.subscribe.(data => { 
       this.list = data; 
      }); 
      } 
  } 
  

• 元器件＃2執行（類似但對於列表2）

• 組件觸發的執行HTTP調用

  @Component({ 
      selector: 'other-component', 
      template: ` 
      <div (click)="executeRequest()">Execute request</div> 
      ` 
  }) 
  export class OtherComponent { 
      constructor(private service:ListService) { 
      } 
  
      executeRequest() { 
      this.service.getLists(); 
      } 
  } 
  

詳情請參閱此問題：

• Delegation: EventEmitter or Observable in Angular2