Angular 2无法使用asp.net MVC 5 Web Api调用自定义Web Api

Question

我在使用asp.net MVC 5中调用自定义Web Api时遇到了问题。以下是我的Web Api控制器和angular js 2的代码。

 [Route("api/email/detail/{id:int}"), HttpGet]
 public async Task<IHttpActionResult> EmailDetail(int id)
 {
     return Ok();
 }

angular app.routing.ts的代码如下：

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './components/home.component';
import { UserComponent } from './components/user.component';
import { EmailComponent } from './components/email.component';
import { EmailDetail } from './components/email.detail';

const appRoutes: Routes = [
    { path: 'App/Template', redirectTo: 'home', pathMatch: 'full' },
    { path: 'home', component: HomeComponent },
    { path: 'user', component: UserComponent },
    { path: 'detail/:id', component: EmailDetail },
    { path: 'email', component: EmailComponent },
    //{ path: 'detail', component: EmailDetail},
];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

email.detail.ts的代码如下：

import { Component, OnInit, ViewChild } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { UserService } from '../Service/user.service';
import { IEmail } from '../Models/user';

import { Http, Response, Headers, RequestOptions } from '@angular/http';


@Component({
    templateUrl: 'About/Template/Detail'
})

export class EmailDetail implements OnInit {
    private emailId: number;
    private email: IEmail

    constructor(private _userService: UserService, private _http: Http, 
    private route: ActivatedRoute) {

    }

    ngOnInit(): void {

        this._http.get("api/email/detail/1992").subscribe(data => {
            // Read the result field from the JSON response.
        });

    }
}

我在控制台中看到的错误信息如下：API调用为http://localhost:16552/detail/api/email/detail/1992，但是detail被添加到了前缀中，导致无法调用API控制器。请注意保留HTML标记。

- Pankaj Dalvi

---

尝试在app.routing.ts中将RouterModule.forRoot(appRoutes)更改为RouterModule.forRoot(appRoutes,{useHash:true})。 - jitender

你的URL中应该有两次详细信息吗？在Angular中，你的基本URL在哪里？ - Andre

没有任何“细节”被添加到自定义 API 路由之前，以使它变成 http://localhost:16552/detail/api/email/detail/1992，这不应该发生。另外，我的基本 URL 代码是：@NgModule({ imports: [BrowserModule, ReactiveFormsModule, HttpModule, routing, Ng2Bs3ModalModule], declarations: [AppComponent, UserComponent, HomeComponent, EmailComponent, EmailDetail], providers: [{ provide: APP_BASE_HREF, useValue: '/' }, UserService], bootstrap: [AppComponent] }) - Pankaj Dalvi

useHash解决了这个问题。 - Pankaj Dalvi

Answer 1

使用useHash解决了问题，现在正常工作。

- Pankaj Dalvi