Angular DI 后未定义的函数

Question

我正在尝试在我的组件 FirstComponent 中注入 class（目前是模拟） 由于某些原因，我在 CourseServiceMock 中的函数未定义，尽管我已在此处声明它们：

CourseServiceMock.ts

import {Course} from "../data/Course";
import {Injectable} from "@angular/core";
import {CourseService} from "./CourseService";

@Injectable()
export class CourseServiceMock extends CourseService{

  constructor() {
    super();
  }

  public get(i: number): Course {
    return new Course("IDID",9,12,"test",i);
  }

  public getAll(): Course[]{
    return [
      new Course("IDID",9,12,"test",1),
      new Course("IDID",9,12,"test",2),
      new Course("IDID",9,12,"test",3),
      new Course("IDID",9,12,"test",4),
    ];
  }
}

CourseService.ts

import {ICourseService} from "./ICourseService";
import {Course} from "../data/Course";

export abstract class CourseService implements ICourseService{
  public courses:Course[] | undefined;

  public abstract get(i: number): Course;
  public abstract getAll(): Course[];

  protected constructor() {
    this.courses = [];
  }
}

我CourseService.ts

import {Course} from "../data/Course";

export interface ICourseService{
  getAll():Course[];
  get(i:number): Course;
}

app.module.ts 我在其中声明要注入的数据

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FirstComponent } from './first/first.component';
import {CourseServiceMock} from "./services/CourseServiceMock";
import {CourseService} from "./services/CourseService";

@NgModule({
  declarations: [
    AppComponent,
    FirstComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [
    {provide: CourseService,useValue:CourseServiceMock}
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

first.component.ts 我的服务被注入的地方

import {Component, Injectable, OnInit} from '@angular/core';
import {Course} from "../data/Course";
import {CourseService} from "../services/CourseService";

@Component({
  selector: 'app-first',
  templateUrl: './first.component.html',
  styleUrls: ['./first.component.scss'],
})
@Injectable()
export class FirstComponent implements OnInit {

  courseService:CourseService;
  maListe: Course[] | undefined;

  constructor(courseService:CourseService) {
    this.maListe = undefined;
    this.courseService = courseService;
    console.log(this.courseService);
  }

  ngOnInit(): void {
    this.maListe = this.courseService.getAll();
    console.log(this.maListe);
  }

}

Answer 1

在 courseService 中，您将 getAll 声明为抽象。意思是，您只能将它与继承自它的服务一起使用 -> CourseServiceMock.getAll() 将起作用。

所以你有两种方法可以解决你的问题

1。删除摘要

没有多大意义 CourseService.ts

import {ICourseService} from "./ICourseService";
import {Course} from "../data/Course";

export abstract class CourseService implements ICourseService{
  public courses:Course[] | undefined;

  public abstract get(i: number): Course;
  public getAll(): Course[]; // <-- removed abstract 

  protected constructor() {
    this.courses = [];
  }
}

2。使用 CourseServiceMock 代替

first.component.ts 我的服务被注入的地方

import {Component, Injectable, OnInit} from '@angular/core';
import {Course} from "../data/Course";
import {CourseServiceMock} from "../services/CourseServiceMock"; // <-- Import the correct one

@Component({
  selector: 'app-first',
  templateUrl: './first.component.html',
  styleUrls: ['./first.component.scss'],
})
@Injectable()
export class FirstComponent implements OnInit {

  courseServiceMock: CourseService;
  maListe: Course[] | undefined;

  constructor(courseServiceMock: CourseServiceMock) { // <-- use the mock service
    this.maListe = undefined;
    this.courseServiceMock = courseServiceMock;
    console.log(this.courseServiceMock);
  }

  ngOnInit(): void {
    this.maListe = this.courseServiceMock.getAll(); // <-- should work
    console.log(this.maListe);
  }

}

额外提示

为什么要将服务分配到新变量中，更愿意将其声明为 public 或私有，因此您可以将其用于 class。

import {Component, Injectable, OnInit} from '@angular/core';
import {Course} from "../data/Course";
import {CourseServiceMock} from "../services/CourseServiceMock"; // <-- Import the correct one

@Component({
  selector: 'app-first',
  templateUrl: './first.component.html',
  styleUrls: ['./first.component.scss'],
})
@Injectable()
export class FirstComponent implements OnInit {
  maListe: Course[] | undefined;

  constructor(private _courseServiceMock: CourseServiceMock) { // <-- declare it public or private
    this.maListe = undefined;
  }

  ngOnInit(): void {
    this.maListe = this._courseServiceMock.getAll(); // <-- should work
    console.log(this.maListe);
  }

}

Answer 2

我一直在 app.modules.ts 中使用 useValue 而不是 useClass。

仍然保持线程以防有人遇到同样的问题。