【问题标题】:Angular 2 not able to call Custom Web Api using asp.net MVC 5 Web ApiAngular 2 无法使用 asp.net MVC 5 Web Api 调用自定义 Web Api
【发布时间】:2018-04-23 07:52:40
【问题描述】:

我在 asp.net MVC 5 中调用自定义 Web Api 时遇到问题。以下是我的 Web Api Controller 和 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.
        });

    }
}

我在控制台中得到的错误如下: The api call is http://localhost:16552/detail/api/email/detail/1992 and detail is getting prepended which is preventing from calling the api controller.

【问题讨论】:

  • 尝试将RouterModule.forRoot(appRoutes) 中的RouterModule.forRoot(appRoutes,{useHash:true}) 更改为app.routing.ts
  • 您的网址中是否应该有 2 次详细信息?你的基本网址在哪里?
  • 在自定义 api 路由之前没有添加任何“详细信息”以使其成为 localhost:16552/detail/api/email/detail/1992,这不应该发生。我的基本 url 代码也是:@NgModule({ 导入:[BrowserModule,ReactiveFormsModule,HttpModule,路由,Ng2Bs3ModalModule],声明:[AppComponent,UserComponent,HomeComponent,EmailComponent,EmailDetail],提供者:[{提供:APP_BASE_HREF,useValue: '/' }, UserService], bootstrap: [AppComponent] })
  • useHash 解决了这个问题。

标签: asp.net angular asp.net-web-api2 angular2-routing


【解决方案1】:

useHash 解决了这个问题,它现在可以正常工作了。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2016-11-16
    • 2016-05-19
    • 2012-03-17
    • 1970-01-01
    • 2016-04-29
    • 2018-10-28
    • 2013-07-25
    相关资源
    最近更新 更多