Question

我是一个有角度的2初学者，我正在学习一个教程...但是在这一点上陷入困境。我无法前进，因为我无法在自定义服务（message.service.ts）中注入HTTP服务。

我试图弄清楚，我发现这是由于“循环依赖性”而发生但我无法解决这个问题。

编辑：我也试过HttpClient ......但没有运气！

请帮我一些正确的代码行，这样可以使这段代码再次运行。

// message.service.ts

import { Http, Response } from '@angular/http';
import { Injectable } from '@angular/core';
import 'rxjs/Rx'
import 'rxjs/add/operator/catch'
import 'rxjs/add/observable/throw';
import { Observable } from 'rxjs';
import { Message } from './message.model';

@Injectable    <--- If i am removing this injectable code is working fine
export class MessageService {
    private messages: Message[] = [];

    constructor(private http: Http) {} <-- and I need to comment out this too.. to avoid DI.

    url: string = 'http://localhost:3000/message';

    addMessage(message: Message) {
        this.messages.push(message);
        const body = JSON.stringify(message);
        const headers = new Headers({'Content-Type': 'application/json'});
        return this.http.post(this.url, body, {headers: headers})
            .map((response: Response) => response.json())
            .catch((error: Response) => Observable.throw(error.json())); <--- In this line catch is showing unresolved function.
    }

    getMessages() {
        return this.messages;
    }

    deleteMessage(message: Message) {
        this.messages.splice(this.messages.indexOf(message), 1);
    }
}

// app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from "@angular/forms";

import { AppComponent } from "./app.component";
import { MessageComponent } from "./messages/message.component";
import { MessageListComponent } from "./messages/message-list.component";
import { MessageInputComponent } from "./messages/message-input.component";
import { MessagesComponent } from "./messages/messages.component";
import { AuthenticationComponent } from "./auth/authentication.component";
import { HeaderComponent } from "./header.component";
import { routing } from "./app.routing";
import { LogoutComponent } from "./auth/logout.component";
import { SignupComponent } from "./auth/signup.component";
import { SigninComponent } from "./auth/signin.component";
import { HttpModule } from '@angular/http';

@NgModule({
    declarations: [
        AppComponent,
        MessageComponent,
        MessageListComponent,
        MessageInputComponent,
        MessagesComponent,
        AuthenticationComponent,
        HeaderComponent,
        LogoutComponent,
        SignupComponent,
        SigninComponent
    ],
    imports: [
        BrowserModule,
        HttpModule,
        FormsModule,
        routing,
        ReactiveFormsModule],
    bootstrap: [AppComponent]
})
export class AppModule {

}

//错误Stacktrace：

compiler.js?7e34:485 Uncaught Error: Can't resolve all parameters for TypeDecorator: (?).
    at syntaxError (compiler.js?7e34:485)
    at CompileMetadataResolver._getDependenciesMetadata (compiler.js?7e34:15700)
    at CompileMetadataResolver._getTypeMetadata (compiler.js?7e34:15535)
    at CompileMetadataResolver._getInjectableMetadata (compiler.js?7e34:15515)
    at CompileMetadataResolver.getProviderMetadata (compiler.js?7e34:1587

Answer 1

将()添加到您的Injectable

@Injectable()
export class MessageService

Answer 2

当您将服务用于其他服务时，您需要添加@Injectable（）。

在你的代码中你没有在@Injectable之后添加括号，比如@Injectable（）。

此处还需要注意的是，一旦创建了自定义服务，就需要将它添加到providers数组中，就像我们有声明和导入数组一样。并且要小心将它添加到适当的组件中，因为它们是分层的。

对于HTTPClient，它从角度版本4.3或更高版本开始可用。你没有Angular 2。

Answer 3

使用HttpClient进行服务调用而不是http

无法将httpmodule注入自定义服务，Angular 2 Error无法解析TypeDecorator的所有参数

3 个答案: