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

在应用程序访问此路由时,它加载正常 . 但是,当我用解决方案刷新页面时,崩溃给我这个错误 - URLs requested via Http on the server must be absolute

我认为发生的事情是因为它尝试在其他任何事情之前加载数据的决心,它不知道完整的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} }
])