Question

我正在试验角5和火店。我使用材质表创建了两个组件，并通过根组件进行路由。我将组件链接到按钮以启用我的开关组件。当前的问题是当我点击一个按钮并且组件切换数据从表中丢失时。这就是我从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

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

Answer 1

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

我还没有进入，但我怀疑它是否保持订阅热。因此，当您浏览表格视图时，它会重新订阅热门观察结果，并且不会接收任何新的＆＃34;数据。

组件在路由时停止从firestore查询数据

1 个答案: