Angular2在视图加载之前从后端加载数据答案

【问题标题】：Angular2 load data from backend before view loadsAngular2在视图加载之前从后端加载数据
【发布时间】：2017-05-19 03:54:04
【问题描述】：

我已经编写了这样的服务代码以从后端读取

getData(): any { 

    let headers = new Headers(
      {

      });
    let options = new RequestOptions({ headers: headers });

    return this.httpClient.get('https://link', options)
      .map((res: Response) => res.json())
      // .do(data => console.log('All data: ' + JSON.stringify(data)))
      .catch((error: any) => Observable.throw(error.json().error || 'Server error'));

以及加载数据的代码

ngOnInit() {
    this.service.getData().subscribe(
      (res) => {this.Data = res},
      (error) => this.errorMessage = <any>error);
}

但是这里它在视图加载后获取数据，所以它给出了错误。

如何在视图加载前加载数据？？

【问题讨论】：

在您的视图中尝试async 管道。
我没听明白？
如果您在视图中显示某些内容...例如 *ngFor="let d of Data" 添加异步管道，例如 *ngFor="let d of Data | async" 如果这是您的问题（错误）
另见stackoverflow.com/questions/37611549/…
警告：需要阅读大量文档！您可能需要resolve guard。如果你这样做了，当你没有看到结果时，你可以添加first 操作符，比如so。

标签： angular ngoninit

【解决方案1】：

Angular 2 是一个像 Java 和 C++ 一样使用类的 OOP。我建议您开始在服务文件中使用类。下面的链接是您可能正在寻找的解决方案。希望这可以帮助。快乐编码..

   Angular 2 , MEAN Stack : Receiving JSON instead of HTML

【讨论】：

javascript 不像 java，只是伪装

【解决方案2】：

最好的选择是使用路由器解析器。解析器是路由定义的一部分，旨在在激活路由之前提供数据。因此，如果显示视图，您可以在 ngOnInit 中获取提供的数据。您只需要使用您的代码在解析器中获取数据

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { DataService } from './DataService';
import { Observable } from 'rxjs/Rx';

@Injectable()
export class MyDataResolve implements Resolve<any> {

    constructor(private dataService: DataService) { }

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any>|Promise<any>|any     {

        let id = +route.params['id'];
        return this.dataService.getRecords('MT_Entity', id);    
    }
}

在组件中： 导出类 BesuchdetailComponent {

   ngOnInit(): void {
     // Initialize form values, Prepare for SELECTS, ...
     let rawdata: any;
     this.rawbobject = this.route.snapshot.data['myobject'];
   }
 }

添加路由器定义：

export const AppRoutes: Routes = [
{

    {
       path: 'objectdetail/:id',
       component: YourComponent,
       resolve: {
          myobject: BesuchResolve
       }
    },
  }

【讨论】：

但它用于路由
您必须以某种方式导航到视图。这将是使用路由解析器的地方