Question

我有几天这个问题了，我找不到解决方案。请参阅该图像以获取控制台日志。

这是我来自APICalls类的代码：

import { HttpClient } from '@angular/common/http';

export class APICalls{

  constructor(private http: HttpClient){}

  public authenticate(username:string, password:string):void{

    const req = this.http.post('http://localhost:9050/user/authenticate', {
        username: username,
        password: password
      })
        .subscribe(
          res => {
            console.log(res);
          },
          err => {
            console.log("Error occured");
          }
        );
}

}

应用模块中的代码

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { RegisterComponent } from './register/register.component';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import { HomeComponent } from './home/home.component';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    RegisterComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    NgbModule.forRoot(),
    HttpClientModule
  ],
  providers: [],
  bootstrap: [
    AppComponent
  ]
})
export class AppModule { }

以及登录组件ts中的代码：

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { APICalls } from '../classes/APICalls';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css'],
  providers: [APICalls]
})
export class LoginComponent {
  public username: string;
  public password: string;

  constructor(private router:Router, private api:APICalls){ }

  public login(){
     alert("TEST:" + " username: " + this.username + " password: " + 
this.password);
    this.api.authenticate(this.username, this.password);
  }

  public navToRegister(){
    this.router.navigateByUrl('/register');
  }
}

构造函数中的httpclient参数有问题，但是我不知道如何解决它，我尝试删除构造函数，但这会带来另一个错误。

Answer 1

您需要向@Injectable服务中添加APICalls装饰器，当服务没有依赖性时，您可以删除@Injectable装饰器，但在这种情况下，您需要注入HttpClient < / p>

@Injectable()
export class APICalls{
...
}

选中此Why do we have to use @Injectable() in Angular?

Answer 2

您需要做两件事。 APICalls是一项服务，您需要将其声明为服务。为此，

将@Injectable（）装饰器放入APICalls

@Injectable() export class APICalls{ // ... }
在提供程序中放置APICalls服务：[]在app.module.ts
中
providers:[APICalls]

Answer 3

在您的APICalls服务中添加@Injectable装饰器。

@Injectable()
export class APICalls{
...
}

还在AppModule的提供程序数组中添加/导入APICalls服务。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { RegisterComponent } from './register/register.component';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import { HomeComponent } from './home/home.component';
import { HttpClientModule } from '@angular/common/http';
import { APICalls } from '../classes/APICalls';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    RegisterComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    NgbModule.forRoot(),
    HttpClientModule
  ],
  providers: [APICalls],
  bootstrap: [
    AppComponent
  ]
})
export class AppModule { }

无法解析APICalls的所有参数：（？）

3 个答案: