Question

我将新的VS2017角度项目从原来的4.2.5升级到v4.4.6，然后尝试在我的app.module.shared.ts文件中设置HttpInterceptor，如下所示：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { HttpClient, HttpInterceptor } from '@angular/common/http';
import { RouterModule } from '@angular/router';

import { AppComponent } from './components/app/app.component';
import { NavMenuComponent } from './components/navmenu/navmenu.component';
import { HomeComponent } from './components/home/home.component';
import { FetchDataComponent } from './components/fetchdata/fetchdata.component';
import { CounterComponent } from './components/counter/counter.component';

@NgModule({
    declarations: [
        AppComponent,
        NavMenuComponent,
        CounterComponent,
        FetchDataComponent,
        HomeComponent
    ],
    imports: [
        CommonModule,
        HttpModule,
        FormsModule,
        ReactiveFormsModule,
        HttpClient,
        HttpInterceptor,
        RouterModule.forRoot([
            { path: '', redirectTo: 'home', pathMatch: 'full' },
            { path: 'home', component: HomeComponent },
            { path: 'counter', component: CounterComponent },
            { path: 'fetch-data', component: FetchDataComponent },
            { path: '**', redirectTo: 'home' }
        ])
    ]
})
export class AppModuleShared {
}

VS已在第5行显示HttpInterceptor导入命令，并在第28行记录错误，我在其中调出导入列表中的HttpInterceptor。在红色波浪线上的鼠标悬停给我错误消息“（TS）'HttpInterceptor'仅引用一个类型，但在这里被用作值。”

我做错了什么？这基本上是一个基于最新VS2017模板的原始，开箱即用的角度实例，我唯一做的就是更新角度并运行webpack的东西。

Answer 1

HttpInterceptor是一个界面，但是＆＃39;导入＆＃39;部分正等着上课。

编辑：据我所知，上面的解释不太清楚，简而言之：

根据https://angular.io/api/common/http/HttpInterceptor

HttpInterceptor是一个接口

interface HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>>
}

而不是将界面放入＆＃34;导入：[...]＆＃34;我们必须创建一个实现此接口的类并将其放入导入中，例如：

@Injectable()
export class AppHttpInterceptor implements HttpInterceptor { 
        // bla bla bla
}

然后

imports: [
...,
AppHttpInterceptor,
...
]

'HttpInterceptor'只引用一个类型，但在这里被用作值

1 个答案: