0

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

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

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

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

4

2 回答 2

1

最好的选择是使用 Routeresolver。解析器是路由定义的一部分，旨在在激活路由之前提供数据。因此，如果显示视图，您可以在 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
       }
    },
  }
于 2017-01-04T18:43:46.813 回答
-3

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

   Angular 2 , MEAN Stack : Receiving JSON instead of HTML
于 2017-01-05T05:41:03.293 回答