javascript - Angular 6 解析始终未定义

Question

我正在尝试使用我的服务从数据库服务器获取值以显示在屏幕上。我使用服务的解析器这样做，因为数据库有时有点慢。

但是无论我尝试了什么，this.route.data.subscribe 给我的数据总是未定义的。我检查了该服务是否从服务器获得响应，确实如此。奇怪的是，如果我直接使用该服务，一切正常。

处理数据的组件:

import { Component, OnInit, Input } from '@angular/core';
import { TempsService, Temps } from '../../temps.service';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-temps',
  templateUrl: './temps.component.html',
  styleUrls: ['./temps.component.scss']
})
export class TempsComponent implements OnInit {
  @Input() solar: boolean;
  solarURL: string = 'tempSolar';
  waterURL: string = 'tempWater';
  tempSolar: number;
  tempWater: number;
  timestamp: string;

  temps: Temps;

  constructor(private route: ActivatedRoute,
  private tempService: TempsService) { }

  showWaterTemp() {
    this.tempService.getTemp(this.waterURL)
      .subscribe(data => {
        this.tempWater = data.rawValue;
        this.timestamp = data.time;
      });
  }

  showSolarTemp() {
    this.route.data
      .subscribe(data => {
        this.tempSolar = data.rawValue;
      });
  }
  ngOnInit() {
    if (this.solar) {
      this.showSolarTemp();
      this.showWaterTemp();
    }
  }
}

这是他的路由模块(我正在使用 CreativeTim 的 NowUI Angular 主题，所以大部分事情都是由他们完成的):

import { Routes } from '@angular/router';

import { DashboardComponent } from '../../dashboard/dashboard.component';
import { UserProfileComponent } from '../../user-profile/user-profile.component';
import { TableListComponent } from '../../table-list/table-list.component';
import { TypographyComponent } from '../../typography/typography.component';
import { IconsComponent } from '../../icons/icons.component';
import { MapsComponent } from '../../maps/maps.component';
import { NotificationsComponent } from '../../notifications/notifications.component';
import { TempsComponent } from '../../dashboard/temps/temps.component';
import { TempResolver } from '../../temp-resolver/temp-resolver.resolver';

export const AdminLayoutRoutes: Routes = [
    { path: 'dashboard',      component: DashboardComponent, children: [
        { path: '', component: TempsComponent, resolve: { temps: TempResolver } }
    ] },
    { path: 'user-profile',   component: UserProfileComponent },
    { path: 'table-list',     component: TableListComponent },
    { path: 'typography',     component: TypographyComponent },
    { path: 'icons',          component: IconsComponent },
    { path: 'maps',           component: MapsComponent },
    { path: 'notifications',  component: NotificationsComponent }
];

这就是解析器的样子:

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Temps, TempsService } from '../temps.service';
import { Observable } from 'rxjs/internal/Observable';

@Injectable()
export class TempResolver implements Resolve<Temps> {

  test: number;
  constructor(private tempService: TempsService) { }

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Temps> {
    this.tempService.getTemp('tempSolar').subscribe(data => {this.test = data.rawValue})
    alert(this.test)

    return this.tempService.getTemp('tempSolar');
  }
}

在我看来，这是一个非常奇怪的问题。

更新:这是获取数据的服务:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { TempsComponent } from './dashboard/temps/temps.component'

export interface Temps {
  id: string;
  time: string;
  date: string;
  name: string;
  rawValue: number;
}

@Injectable()
export class TempsService {

  constructor(private http: HttpClient) { }

  url: string = window.location.hostname;

  tempUrl = 'http://' + this.url + ':3000/latestTime/';

  getTemp(temp: String) {
    return this.http.get<Temps>(this.tempUrl + temp);
  }
}

Answer 1

我刚刚尝试将解析添加到使用 Temp 组件的仪表板组件。现在它就像一个魅力。现在看起来像这样:

{ path: 'dashboard',      component: DashboardComponent, resolve: {temps: TempResolver} }

而不是这个:

{ path: 'dashboard',      component: DashboardComponent,
    children: [{ path: '', component: TempsComponent, resolve: { temps: TempResolver } }] 
},