我是Angular中的新手,我遇到了烦人的问题,我不明白。我想将我的服务注入@NgModule,以便我可以在应用程序的任何地方使用它,而无需再次声明或导入它。然后,当我运行我的项目时,刷新页面后一切正常,并获得此异常:
错误:未捕获(在承诺中):错误:没有服务提供商
make.service.ts
import { Injectable, Inject } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
@Injectable()
export class MakeService {
originUrl;
constructor(private http: Http, @Inject('ORIGIN_URL') originUrl: string) {
this.originUrl = originUrl;
}
getMakes() {
return this.http.get(this.originUrl + '/api/makes')
.map(res => res.json());
}
getFeatures() {
return this.http.get(this.originUrl + '/api/features')
.map(res => res.json());
}
}
此服务我在 app.module.ts :
中声明import { MakeService } from './services/make.service';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { sharedConfig } from './app.module.shared';
@NgModule({
imports: [
BrowserModule,
FormsModule,
HttpModule,
...sharedConfig.imports
],
declarations: sharedConfig.declarations,
bootstrap: sharedConfig.bootstrap,
providers: [MakeService, { provide: 'ORIGIN_URL', useValue: location.origin }]
})
export class AppModule {
}
最后在我的组件 vehicle-form.component.ts
中使用它import { Component, OnInit } from '@angular/core';
import { MakeService } from '../../services/make.service';
@Component({
selector: 'app-vehicle-form',
templateUrl: './vehicle-form.component.html',
styleUrls: ['./vehicle-form.component.css'],
})
export class VehicleFormComponent implements OnInit {
makes;
vehicle = {};
constructor(private makeService: MakeService) { }
ngOnInit() {
this.makeService.getMakes().subscribe(makes => {
this.makes = makes
console.log("MAKES", this.makes);
});
}
onMakeChange() {
console.log("VEHICLE", this.vehicle);
}
}
当我在我的组件中声明提供者时:
...
@Component({
selector: 'app-vehicle-form',
templateUrl: './vehicle-form.component.html',
styleUrls: ['./vehicle-form.component.css'],
providers: [MakeService]
})
...
然后一切正常,但这不是我想要存档的内容。
答案 0 :(得分:0)
@Maximus是的,我正在使用路由。我不知道为什么angular CLI会生成3个独立的文件而不是一个。
这三个文件是: app.module.server.ts,app.module.shared.ts,app.module.client.ts
我必须将app.module.client重命名为app.module.ts才能从CLI生成组件,因为有错误的app.module文件丢失。
所以我认为app.module.client现在是旧的app.module文件,它导入了另外两个文件app.module.server和app.module.shared。
app.module.shared 文件如下所示:
import { FormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
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';
import { VehicleFormComponent } from './components/vehicle-form/vehicle-form.component';
export const sharedConfig: NgModule = {
bootstrap: [ AppComponent ],
declarations: [
AppComponent,
NavMenuComponent,
CounterComponent,
FetchDataComponent,
HomeComponent,
VehicleFormComponent
],
imports: [
FormsModule,
RouterModule.forRoot([
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'vehicles/new', component: VehicleFormComponent },
{ path: 'home', component: HomeComponent },
{ path: 'counter', component: CounterComponent },
{ path: 'fetch-data', component: FetchDataComponent },
{ path: '**', redirectTo: 'home' }
])
]
};
答案 1 :(得分:0)
我认为你正在倾斜风车。我最好在某些类中将常量导出为静态字段:
<强> some.settings.ts 强>
export class SomeSettings {
public static ORIGIN_URL=window.location.origin;
}
然后在 make.service.ts
中使用它import { Injectable, Inject } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
@Injectable()
export class MakeService {
constructor(private http: Http) {
const settings = require( './some.settings' );
this.SomeSettings = settings.SomeSettings;
}
SomeSettings: any;
getMakes() {
return this.http.get(SomeSettings.ORIGIN_URL + '/api/makes')
.map(res => res.json());
}
getFeatures() {
return this.http.get(SomeSettings.ORIGIN_URL + '/api/features')
.map(res => res.json());
}
}
答案 2 :(得分:0)
我也看到了同样的问题。但是当我将提供者声明(依赖注入)放在app.component.ts(我的根组件)中时,我再也看不到这个问题了。
最佳,