路由，角度应用

Question

我有一个角度为6的前端应用程序，我使用Firebase的 Firestore 存储数据，该数据库包含一个孔的集合。

我想在卡中显示孔信息，因此创建了卡组件。有一个 wellFirestore 服务可处理与Firestore的连接，该卡组件能够从Firebase读取数据并将其显示为简单的卡，但是当我路由时>从该页面移至另一页面，然后返回带有卡片的页面，信息不会加载。路由返回时，甚至控制台登录卡组件都不会记录任何内容，但是当我刷新页面时，一切都很好，直到路由出去。

我是Angular的新手，并且不确定如何调试它。在此问题上的任何帮助都将受到欢迎。

wellFirestore ：

import { Injectable } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection , AngularFirestoreDocument  } from 'angularfire2/firestore';
import { importType } from '@angular/compiler/src/output/output_ast';
import { Well } from '../models/well';
import { reading } from '../models/reading';
import { Observable } from 'rxjs'
import { map } from 'rxjs/operators'


@Injectable({
  providedIn: 'root'
})
export class WellFirestore{
  items: Observable<Well[]>
  constructor(private afs: AngularFirestore) {
      // this.items = this.afs.collection('Well-Nodes').valueChanges();
      this.items = this.afs.collection('Well-Nodes').snapshotChanges().pipe(
        map(res => {
          return res.map(a => {
            const data = a.payload.doc.data() as Well;
            data.id = a.payload.doc.id;
            return data;
          });
        })
      )
   }

   getWells(){
     return this.items;
   }

   getWellById(wellID: string){
    return this.afs.collection('Well-Nodes').doc(wellID).snapshotChanges().pipe(
      map(res => {
        const data = res.payload.data() as Well;
        data.id = res.payload.id;
        return data;
      })
    );
   }

   getReadings(wellID: string){
     return this.afs.collection('Well-Nodes').doc(wellID).collection('Readings' , ref => ref.orderBy("Timestamp")).snapshotChanges().pipe(
       map(res => {
        return res.map(a => {
          const data = a.payload.doc.data() as reading;
          data.id = a.payload.doc.id;
          return data;
        })
       })
     );
   }
}

卡组件：

import { Component } from '@angular/core';
import { WellFirestore } from '../../services/well-firestore.service';
import { Well } from '../../models/well';
import { Observable } from 'rxjs'

@Component({
  selector: 'card-comp',
  templateUrl: 'cards.component.html'
})
export class CardsComponent {

  wells: Well[];
  wellID: string;
  reading: number;
  volume: number;

  constructor(private wellDAO: FireUpService) {

    this.wellDAO.getWells().subscribe(item => {
      console.log(item);

      this.wells = item;   
      this.wellID = item.pop().id

      this.wellDAO.getReadings(this.wellID).subscribe(data =>{
        console.log(data);
        let levels = data.map(item => item.Level);
        let vol = data.map(item => item.Volume);
        console.log(levels);
        this.reading = levels.pop();
        this.volume = vol.pop();
      } );
    });
  }
}

路由模块：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

// Import Containers
import { DefaultLayoutComponent } from './containers';

import { P404Component } from './views/error/404.component';
import { P500Component } from './views/error/500.component';
import { LoginComponent } from './views/login/login.component';
import { RegisterComponent } from './views/register/register.component';


export const routes: Routes = [
  {
    path: '',
    redirectTo: 'dashboard',
    pathMatch: 'full',
  },
  {
    path: '404',
    component: P404Component,
    data: {
      title: 'Page 404'
    }
  },
  {
    path: '500',
    component: P500Component,
    data: {
      title: 'Page 500'
    }
  },
  {
    path: 'login',
    component: LoginComponent,
    data: {
      title: 'Login Page'
    }
  },
  {
    path: 'register',
    component: RegisterComponent,
    data: {
      title: 'Register Page'
    }
  },
  {
    path: '',
    component: DefaultLayoutComponent,
    data: {
      title: 'Home'
    },
    children: [
      {
        path: 'base',
        loadChildren: './views/base/base.module#BaseModule'
      },
      {
        path: 'buttons',
        loadChildren: './views/buttons/buttons.module#ButtonsModule'
      },
      {
        path: 'charts',
        loadChildren: './views/chartjs/chartjs.module#ChartJSModule'
      },
      {
        path: 'dashboard',
        loadChildren: './views/dashboard/dashboard.module#DashboardModule',
      },
      {
        path: 'icons',
        loadChildren: './views/icons/icons.module#IconsModule'
      },
      {
        path: 'notifications',
        loadChildren: './views/notifications/notifications.module#NotificationsModule'
      },
      {
        path: 'theme',
        loadChildren: './views/theme/theme.module#ThemeModule'
      },
      {
        path: 'widgets',
        loadChildren: './views/widgets/widgets.module#WidgetsModule'
      }
    ]
  }
];

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ],
  providers: [

  ]
})
export class AppRoutingModule {}