Angular 2、ResolveGuard、Angular http、答案

【问题标题】：Angular 2, ResolveGuard,Angular http,Angular 2、ResolveGuard、Angular http、
【发布时间】：2017-01-18 05:25:59
【问题描述】：

我的 http get call 服务

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/catch';
import { IAppInfo } from './appInfo';
import { IProduct } from './product';
@Injectable()
export class AppInfoService {
  private _appInfoUrl : string = "api/appInfo/appInfo.json";
 //constructor
 constructor (private _http : Http){}

 getAppInfo() : Observable<IAppInfo[]>  {
    return this._http.get(this._appInfoUrl)
                .map((response : Response) => <IAppInfo[]>response.json())
                .do(data => console.log('Service'+JSON.stringify(data)))
                .catch(this.handleError);
    }
    private handleError(error : Response){
      console.error(error);
      return Observable.throw(error.json().error || 'servererror');
    }
}

它是我的服务我在我的 Guard 中使用此服务

import { Injectable } from '@angular/core';
import { Resolve } from '@angular/router';
import { IAppInfo } from './appInfo';
import { AppInfoService } from './appInfo.service';
@Injectable()
export class AppInfoResolveGuard implements Resolve<IAppInfo[]> {
    appInfo : IAppInfo[];
    errormessage : string;
    constructor (private _appInfoService : AppInfoService ){
        console.log("Resolve Guard");
    }
    resolve()  {
        console.log('guard'+this._appInfoService.getAppInfo());
        return this._appInfoService.getAppInfo();                  
    }
}

并将此解析传递给路由器路径

 { path: 'rklob', resolve: {app : AppInfoResolveGuard }, component:   RklobAppComponent },

并在我的组件类中获取该数据

import { Component, OnInit } from '@angular/core';
import { Route } from '@angular/router';
import { ActivatedRoute } from '@angular/router';
import { IAppInfo } from './appInfo';
import { AppInfoService } from './appInfo.service';
import { IWelcome } from './home/welcome';
@Component({
    selector: 'rklob-app-main',
    moduleId: module.id,
    templateUrl: 'rklob-app.component.html'
})
export class RklobAppComponent implements OnInit {
    appInfo : IAppInfo[];
    appWelcome : IWelcome;
    appAbout : IAbout;
    appService : IServices[];
    appPerson : IPerson[];
    appClientGallery : IClientGallary[];
    appPackage : IPackage[];
    appAddresses : IAddress[];
    errormessage : string;

    constructor (private _route : ActivatedRoute, private _appInfoService :        AppInfoService){
        console.log('component');
    }
    ngOnInit(){
      this.appInfo = this._route.snapshot.data['app'];
      for(let data of this.appInfo){
          console.log(data.captionData);
          this.appWelcome.captionData = data.captionData;
          this.appWelcome.welcomeInfo = data.welcomeInfo;
      }
    }
}

console.log(data.captionData); 显示一个值，但它可以分配给 this.appWelcome.captionData 和 this.appWelcome.welcomeInfo = data.welcomeInfo; 它给我一个像

这样的错误

异常：未捕获（承诺中）：TypeError：无法设置属性未定义 TypeError 的“captionData”：无法设置属性 'captionData' 未定义

如何分配this.appWelcome.captionData = data.captionData;

【问题讨论】：

错误是指您的appWelcome 对象未初始化。它不是指返回的数据。
我没有发现任何问题..
如果我是这样设置的 ** appWelcome : IWelcome = { captionData : "" , welcomeInfo : ""};** 它对我有用，但它是否正确？请告诉我。如果 appWelcome 是一个对象数组 那么我可以这样做 => appWelcome : IWelcome[] = [{ captionData : "" , welcomeInfo : ""}]; 吗？是真的吗
感谢解决我的问题

标签： http angular observable resolve

【解决方案1】：

appWelcome 未初始化。您可以为其分配一个空对象，这将解决问题（请注意，您可能需要添加具有空值的属性以满足编译时的 IWelcome 接口）：

appWelcome : IWelcome = {};

【讨论】：