组件在路由时停止从 Firestore 查询数据答案

【问题标题】：Component stops querying data from firestore when routed组件在路由时停止从 Firestore 查询数据
【发布时间】：2018-08-06 14:41:18
【问题描述】：

我正在尝试使用 Angular 5 和 Firestore。我使用材料表创建了两个组件并将其路由到根组件。我将组件链接到按钮以使我能够切换组件。当前的问题是当我单击一个按钮并且组件切换时，数据会从表中丢失。这就是我从firestore查询数据的方式

export class SalesServicesService {
    SalesData : AngularFirestoreCollection<Sales>;
    Sales: Observable<Sales[]>;

  constructor(public afs: AngularFirestore) {
    this.Sales = this.afs.collection('Sales').valueChanges();
   }

   addSalesData(SalesData) {
    this.afs.collection('Sales').add(SalesData);
  }

   getSales(){
     return this.Sales;
   }

}

这是我用于路由的代码

const myroute: Routes =  [
  //{ path: "", component: AppComponent},
  { path: "sales", component: SalesInventoryComponent},
  { path: "prod" , component: ProductsinventoryComponent}
  
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forRoot(myroute),
    RouterModule
  ],
  exports: [RouterModule]
})
export class MyrouterModule { }

这就是我在根组件 html 中进行路由的方式

<body class ="navcol">

<button mat-raised-button color ="warn" routerLink ="/sales" >Sales Component</button>
<button mat-raised-button color ="warn" routerLink ="/prod" >Products Component</button>
<span class ="highttest"></span>

<router-outlet></router-outlet>
</body>

完整的项目在这个链接上Stackblitz-Angular

任何帮助将不胜感激。谢谢

【问题讨论】：

标签： angular typescript google-cloud-firestore angular5 angularfire2

【解决方案1】：

您在问题中发布的示例代码没有问题，但在您的 StackBlitz 中，麻烦在于您在 ngViewAfterInit 中不必要的订阅，这是一个固定的 StackBlitz https://stackblitz.com/edit/angular-route-firstore-table-dxk78e

我还没有深入研究，但我怀疑它使订阅保持热度。因此，当您导航回 table view 时，它重新订阅了一个 hot observable，并且没有获取任何“新”数据。

【讨论】：