首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >在AngularJS 2中可以有两个用于单次呼叫服务模板

在AngularJS 2中可以有两个用于单次呼叫服务模板
EN

Stack Overflow用户
提问于 2016-03-03 09:28:05
回答 2查看 1.3K关注 0票数 1

我的服务返回两个项目列表,我希望将每个列表呈现给差异选择器

代码语言:javascript
复制
this.http.get(url).map(res => res.json())

json返回{ list1: [...], list2: [...] }

我有两个<div>来呈现list1list2

是否可以使用Angular JS 2?

EN

回答 2

Stack Overflow用户

发布于 2016-03-03 13:19:14

代码语言:javascript
复制
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;
      }
    });
  }
}
代码语言:javascript
复制
@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);
  }
}
代码语言:javascript
复制
@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

票数 0
EN

Stack Overflow用户

发布于 2016-03-03 14:29:12

我不知道您的请求是如何触发调用的。例如,另一个组件。

您还可以在服务中定义两个EventEmitter属性(每个列表一个),以便在HTTP调用的响应存在时发出事件。有两个组件可以订阅它,以便在有数据时得到通知。

  • 服务实现

导出类ListService { list1Event: EventEmitter =新EventEmitter();list2Event: EventEmitter =新EventEmitter();getLists() { return this.http.get(url).map(res => res.json()) .subscribe( (data) => { this.list1Event.emit(data.list1);this.list2Event.emit(data.list2);} );}}Component #1实现

@Component({选择器:'my-component1',模板:<ul> <li \*ngFor="#item of list">{{item.name}}</li> </ul> })导出类MyComponent1 {构造函数(私有服务:ListService){ this.service.list1Event.subscribe.(data => { this.list = data;});} }

  • Component #2实现(与触发HTTP调用执行的HTTP类似

@Component({选择器:'other-component',模板:<div (click)="executeRequest()">Execute request</div> })导出类OtherComponent {构造函数(私有服务:ListService){} executeRequest() { this.service.getLists();} }

有关更多详细信息,请参阅此问题:

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/35761450

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档