页面刷新时的Angular Resolve错误

时间:2017-10-11 10:34:46

标签: angular

我已经设置了一个角度分辨率来在组件初始化之前获取组件的数据。值得一提的是,后端是一个asp net core 2项目,它是index.html所在的项目。

在应用程序访问此路线时,它会正常加载。但是,当我用解决方案刷新页面时,崩溃给我这个错误 -      服务器上通过Http请求的网址必须是绝对的

我认为发生的事情是因为它试图在其他任何事情之前加载数据的决心,它不知道完整的URL因此崩溃。

这是我的解决码:

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot } from '@angular/router';

import { User } from "../models/user";
import { UserService } from '../services/user-service';

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

  constructor(private userService: UserService) {}

  resolve(route: ActivatedRouteSnapshot) {
      return this.userService.getUser(+route.paramMap.get('id'));
  }
}

这是我的应用组件代码

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, ParamMap } from '@angular/router';
import 'rxjs/add/operator/switchMap';

import { UserService } from "../../services/user-service";


import { User } from "../../models/user";

@Component({
    selector: 'user-detail',
    templateUrl: './user-detail.component.html',
    styleUrls: ['./user-detail.component.css']
})

export class UserDetailComponent implements OnInit {
    user: User;

    constructor(private userService: UserService, private route: ActivatedRoute) { }

    ngOnInit(): void {
        this.user = this.route.snapshot.data['userDetail'];
        //this.route.paramMap
        //    .switchMap((params: ParamMap) => this.userService.getUser(+params.get('id')))
        //    .subscribe(user => this.user = user);
    }



}

这是我的服务代码:

private baseUserUrl = 'api/User/'
getUser(id: number): Promise<User> {
    let url = '' + this.baseUserUrl + 'GetUserAsync?id=' + id;
    return this.http.get(url)
        .toPromise()
        .then(resp => resp.json() as User);
};

最后,这是我的路由代码:

RouterModule.forRoot([
    { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
    { path: 'dashboard', component: DashboardComponent },
    { path: 'usersearch', component: UserSearchComponent },
    { path: 'userdetail/:id', component: UserDetailComponent, resolve: { userDetail: UserDetailResolve} }
])

0 个答案:

没有答案