Javascript 角度分辨率始终未定义

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

但是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);
  }
}

你能试试这个吗

   this.route.data
  .subscribe(({temps}) => {
    this.tempSolar = temps;
  });

你能试试这个吗

   this.route.data
  .subscribe(({temps}) => {
    this.tempSolar = temps;
  });

---

无论如何，避免在resolve中订阅getTemps，只需返回一个可观察的。请记住getTemps的异步特性。alertthis.test几乎总是在getTemps完成之前执行，基本上保证它在发出警报时是未定义的

只需返回getTemp，使其返回一个可观察的：

下面是一个示例，展示了实际使用的功能

---

希望这有帮助

无论如何，避免订阅resolve中的getTemps，只需返回一个可观察的。请记住getTemps的异步特性。alertthis.test几乎总是在getTemps完成之前执行，基本上保证它在发出警报时是未定义的

只需返回getTemp，使其返回一个可观察的：

下面是一个示例，展示了实际使用的功能

---

希望这有帮助

我刚刚尝试将解析添加到使用临时组件的仪表板组件中。现在它就像一个符咒。 现在看起来是这样的：

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

与此相反：

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

---

我刚刚尝试将解析添加到使用临时组件的仪表板组件中。现在它就像一个符咒。 现在看起来是这样的：

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

与此相反：

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

---

稍后会有另一个附加值，因此您的第二个解决方案不幸无法工作。对于第一个解决方案，我尝试了这个方法，但只得到了TypeError:data.temps是未定义的。。。我现在真的很沮丧…顺便说一句，该服务从数据库得到的响应是这样的：{id:00_0010_1122_10_0100_000_2_0，时间：22:11，日期：21.02.2018，名称：温度传感器1，rawValue:-1.4000000000000001}更新了上面的问题。我用StackBlitz示例更新了答案，显示了正在运行的功能。如果没有帮助，您至少可以使用StackBlitz，并使用嵌套的仪表板功能管线/组件对其进行更新。谢谢稍后会有另一个附加值，因此您的第二个解决方案不幸无法工作。对于第一个解决方案，我尝试了这个方法，但只得到了TypeError:data.temps是未定义的。。。我现在真的很沮丧…顺便说一句，该服务从数据库得到的响应是这样的：{id:00_0010_1122_10_0100_000_2_0，时间：22:11，日期：21.02.2018，名称：温度传感器1，rawValue:-1.4000000000000001}更新了上面的问题。我用StackBlitz示例更新了答案，显示了正在运行的功能。如果没有帮助，您至少可以使用StackBlitz，并使用嵌套的仪表板功能管线/组件对其进行更新。谢谢