我在Angular 2中构建了一个基本应用程序,并且无法通过模块将服务注入到我的一个组件中。
使用webpack编译后,我得到以下错误: " Angular 2 DI - 无法解决所有参数"
// UserModule
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {UserService} from "../services/user.service";
import {UserComponent} from "./user.component";
@NgModule({
imports: [
CommonModule
],
declarations: [
UserComponent
],
exports: [UserComponent],
providers: [UserService]
})
export class UserModule {}
// UserComponent
import {Component, Inject} from '@angular/core';
import {UserService, IUser} from "../services/user.service";
import {FormGroup, ReactiveFormsModule} from "@angular/forms";
@Component({
templateUrl: './user.component.html',
styleUrls: ['./user.component.css']
})
export class UserComponent {
user: IUser[] = [];
// constructor(private userService: UserService) {
// does not work too
constructor(@Inject(UserService) private userService: UserService) {
this.user = this.userService.get({id: 1});
}
}
// UserService
import {Injectable} from '@angular/core';
import {RequestMethod} from '@angular/http';
import {ResourceMethod} from 'ngx-resource/src/Interfaces';
import {ResourceAction, ResourceParams} from 'ng2-resource-rest';
import {RestClient} from '../shared/rest-client';
interface IQueryInput {
id: number;
}
export interface IUser {
id: number;
name: string;
description: string;
user_content: IUserContent[];
}
export interface IUserContent {
url: string;
type: string;
title: string;
}
@Injectable()
@ResourceParams({
url: 'users'
})
export class UserService extends RestClient {
@ResourceAction({
path: '/',
isArray: true
})
query: ResourceMethod<IQueryInput, IUser[]>;
@ResourceAction({
path: '/{!id}'
})
get: ResourceMethod<{id: any}, IUser[]>;
}
这是来自浏览器控制台:
Uncaught Error: Can't resolve all parameters for UserService: (?, ?).
at syntaxError (http://127.0.0.1:8000/vendor.bundle.js:41458:34) [<root>]
at CompileMetadataResolver._getDependenciesMetadata (http://127.0.0.1:8000/vendor.bundle.js:54735:35) [<root>]
at CompileMetadataResolver._getTypeMetadata (http://127.0.0.1:8000/vendor.bundle.js:54603:26) [<root>]
at CompileMetadataResolver._getInjectableMetadata (http://127.0.0.1:8000/vendor.bundle.js:54589:21) [<root>]
at CompileMetadataResolver.getProviderMetadata (http://127.0.0.1:8000/vendor.bundle.js:54878:40) [<root>]
at http://127.0.0.1:8000/vendor.bundle.js:54808:49 [<root>]
at Array.forEach (native) [<root>]
at CompileMetadataResolver._getProvidersMetadata (http://127.0.0.1:8000/vendor.bundle.js:54769:19) [<root>]
at CompileMetadataResolver.getNgModuleMetadata (http://127.0.0.1:8000/vendor.bundle.js:54424:50) [<root>]
at CompileMetadataResolver.getNgModuleSummary (http://127.0.0.1:8000/vendor.bundle.js:54277:52) [<root>]
at http://127.0.0.1:8000/vendor.bundle.js:54350:72 [<root>]
at Array.forEach (native) [<root>]
at CompileMetadataResolver.getNgModuleMetadata (http://127.0.0.1:8000/vendor.bundle.js:54335:49) [<root>]
at JitCompiler._loadModules (http://127.0.0.1:8000/vendor.bundle.js:65516:64) [<root>]
答案 0 :(得分:0)
我认为您需要将ResourceModule.forRoot()添加到导入中。
如果您使用的是Typescript,则应删除@Inject()。
IMO,您的问题更像是如何正确使用ngx-resource。
你可能想先尝试他们的榜样