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

我有一个类页面（定义如下）和返回可观察页面的服务。如何在没有重复订阅的情况下正确使用observable。Plunker（不工作）

导出类页面{
内容：数组=新数组（）；
最后：布尔值=真；
总页数：页数=0；
totalElements:number=0；
大小：数字=0；
编号：number=0；//页码
第一：布尔值=真；
numberOfElements:number=0；//当前页面中的元素数
}
导出类DataGridService{
getPageForGrid（gridName:string）：可观察{
返回anObservable；//代码已删除。请参阅plunker
}
}
@组成部分({
选择器：“数据网格”，
changeDetection:ChangeDetectionStrategy.OnPush，
模板：`

页面大小：{{Page.size}
编号：{{page.Number}
总页数：{{page.totalPages
元素总数：{page.totalElements}
元素数：{page.numberOfElements}

{{row['column1']}
{{row['column2']}
`,
提供者：[DataGridService]
})
导出类DataGridComponent{
@输入gridName:string；
第页：可见；
构造函数（）{
this.dataGridService=newdatagridservice（）；
}
ngOnChanges（更改）{
this.page=this.dataGridService.getPageForGrid（this.gridName）；
}
}

您可以看到，我对您的代码做了一些更改

正如您在这里看到的，

Observable

一点也不复杂，它也不关心它发出的数据类型。它可以是简单的字符串、数据对象（就像您的例子）或其他任何东西

我建议您使用

Observable

作为生成器，就像我使用

Observable.of（）

一样，不要使用

newobservable（）

，至少在您真正理解它的工作原理之前

@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);
  }
}

@Injectable（）
导出类DataGridService{
getPageForGrid（gridName:string）：可观察{
var page=新页面（）；
page.size=2；
page.totalPages=10；
page.totalElements=19；
page.numberOfElements=2；
page.content=[{column1:“11”，column2:“12”}，{column1:“21”，column2:“22”}]；
可观察的返回值（第页）；
}
}
@组件（…）
导出类DataGridComponent{
构造函数（公共dataGridService:dataGridService）{
this.dataGridService.getPageForGrid（this.gridName）
.subscribe（page=>this.page=page）；
}
}

我认为这段代码不再使用DataGridComponent中的page作为可观察的对象。“page”现在看起来像page的普通实例。将修改后的代码视为plunker，因为ChangeDetectionStrategy是Push，所以无法工作。如果从组件定义中删除“ChangeDetectionStrategy:ChangeDetectionStrategy.OnPush”，则它将工作。B但是我想去工作。

@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);
  }
}