Question

当我尝试向组件中注入服务时，Angular不会加载组件并引发错误。控制台中的错误仅显示：

ERROR Error: "[object Object]"
    Angular 11
        resolvePromise
        resolvePromise
        scheduleResolveOrReject
        invokeTask
        onInvokeTask
        invokeTask
        runTask
        drainMicroTaskQueue
        invokeTask
        invokeTask
        globalZoneAwareCallback

我要向其中注入服务的组件（它是锻炼服务）：

import { Component, OnInit } from '@angular/core';

import { CalendarService } from '../shared/calendar.service';
import { WorkoutService } from '../shared/workout.service';
import { Set } from '../shared/set.model';
import { Exercise } from '../shared/exercise.model';
import { Workout } from '../shared/workout.model';

@Component({
  selector: 'app-workout-form',
  templateUrl: './workout-form.component.html',
  styleUrls: ['./workout-form.component.css']
})
export class WorkoutFormComponent implements OnInit {
  exerciseArr: number[] = [];

  selectedDay = '1';
  selectedMonth = 'Mai';
  selectedYear = '2019';

  constructor(public calendarService: CalendarService, private workoutService: WorkoutService) { }

  ngOnInit() {
  }
[...]

这是我要注入的服务：

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

import { AuthService } from '../auth/auth.service';

@Injectable({
  providedIn: 'root'
})
export class WorkoutService {

  constructor(private http: HttpClient, private authService: AuthService) { }

  saveWorkoutToDb(workout) {
    this.http.post([...]);
  }
}

我的IDE给我错误消息，提示它无法解析给定组件的所有参数。当我移除注射剂时，组件可以很好地加载。

这是我的app.module.ts：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatCardModule,  MatInputModule, MatButtonModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';


import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { WorkoutFormComponent } from './workout-form/workout-form.component';
import { WorkoutCalendarComponent } from './workout-calendar/workout-calendar.component';
import { WorkoutEditComponent } from './workout-edit/workout-edit.component';
import { AuthComponent } from './auth/auth.component';

@NgModule({
  declarations: [
    AppComponent,
    WorkoutFormComponent,
    WorkoutCalendarComponent,
    WorkoutEditComponent,
    AuthComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    BrowserAnimationsModule,
    MatCardModule,
    MatFormFieldModule,
    MatInputModule,
    MatButtonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

编辑：当我在锻炼服务中删除对HttpClient的注入时，错误消失了。

Answer 1

您需要像这样更改app.module.ts：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatCardModule,  MatInputModule, MatButtonModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';


import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { WorkoutFormComponent } from './workout-form/workout-form.component';
import { WorkoutCalendarComponent } from './workout-calendar/workout-calendar.component';
import { WorkoutEditComponent } from './workout-edit/workout-edit.component';
import { AuthComponent } from './auth/auth.component';

@NgModule({
  declarations: [
    AppComponent,
    WorkoutFormComponent,
    WorkoutCalendarComponent,
    WorkoutEditComponent,
    AuthComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    BrowserAnimationsModule,
    MatCardModule,
    MatFormFieldModule,
    MatInputModule,
    MatButtonModule,
    HttpClientModule, //<- you are missing this import 
  ],
  providers: [],
  bootstrap: [AppComponent]
})

将服务注入Angular中的组件时遇到问题

1 个答案: