在 AngularJS 2 中可以有两个用于单调用服务的模板答案

【问题标题】：Is possible to have two template for single call service in AngularJS 2在 AngularJS 2 中可以有两个用于单调用服务的模板
【发布时间】：2016-03-03 01:28:04
【问题描述】：

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

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

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

我有两个<div> 来渲染list1 和list2。

是否可以使用 Angular JS 2？

【问题讨论】：

是的。但这与您为单个列表执行此操作的方式应该没有太大区别。是什么阻碍了你？
您可以为子组件做 [inputs]、[outputs] 和事件发射器到父组件来接收它们，或者它是您应用程序的另一个完全独立的部分？如果是这种情况，您可以使用 redux-store 或使用 observable 并观察对象的更改以更新应用程序的不同部分。如果您想这样做，请确保将其添加到引导程序中，以便您的应用程序中只有一个实例。

标签： angular

【解决方案1】：

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

您还可以在服务中定义两个 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 实现（类似但针对 list2）

触发执行 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

【讨论】：

EventEmitter 不会在 MyComponent 上触发。我认为每个组件中的服务对象不是同一个实例，请参阅plnkr.co/edit/sd8FvFva428g4gibRXKP?p=preview
是的，您需要在引导应用程序时指定它才能共享同一个实例...

【解决方案2】：

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

【讨论】：