angular2 如何在没有重复订阅的情况下使用复杂的 observable

Question

我有一个类 Page（定义如下）和服务，它返回一个可观察的 Page。如何在没有重复订阅的情况下正确使用 observable。 Plunker（不工作）http://plnkr.co/edit/8xwclHsGm2jKdW9A0fZ4?p=preview

export class Page<T>{
  content: Array<T> = new Array();
  last: boolean = true;
  totalPages: number = 0;
  totalElements: number = 0;
  size: number = 0;
  number: number = 0; // Page number
  first: boolean = true;
  numberOfElements: number = 0; //Number of elements in current page
}


export class DataGridService {
  getPageForGrid(gridName:string):Observable<Page<any>>{
    return anObservable; //code removed. see plunker
  }
}


@Component({
    selector: 'data-grid',
    changeDetection: ChangeDetectionStrategy.OnPush,
    template: `<div class="row">
  <ul>
    <li>Page size: {{page.size}}</li>
    <li>Number: {{page.number}}</li>
    <li>Total pages: {{page.totalPages</li>
    <li>Total Elements: {{page.totalElements}}</li>
    <li>Number of elements:{{page.numberOfElements}}</li>
  </ul>
  <div>
    <table>
      <tbody>
        <tr *ngFor="#row of page.content; #i = index">
          <td>{{row['column1']}}</td>
          <td>{{row['column2']}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>`,
providers:[DataGridService]
})
export class DataGridComponent {
  @Input gridName: string;

  page: Observable<Page<any>>;

  constructor(){
    this.dataGridService = new DataGridService();
  }

  ngOnChanges(changes){
    this.page = this.dataGridService.getPageForGrid(this.gridName);
  }
}

Answer 1

我对你的代码做了一些修改，你可以看到working plunker here。

正如您在此处看到的，Observable 一点也不复杂，它并不关心它发出什么类型的数据。它可以是简单的字符串、数据对象（如您的情况）或其他任何东西。

我建议您使用 Observable 作为生成器，就像我使用 Observable.of() 所做的那样，不要使用 new Observable()，至少在您真正了解它是如何工作之前...

@Injectable()
export class DataGridService {
  getPageForGrid(gridName:string):Observable<Page<any>>{
  var page = new Page();
      page.size = 2;
      page.totalPages = 10;
      page.totalElements=19;
      page.numberOfElements=2;
      page.content = [{column1:"11", column2:"12"},{column1:"21", column2:"22"}];

    return Observable.of(page));
  }
}

@Component(...)
export class DataGridComponent {
  constructor(public dataGridService: DataGridService){
    this.dataGridService.getPageForGrid(this.gridName)
      .subscribe(page => this.page = page);
  }
}