NgModule提供程序未在Angular中提供服务

问题描述

因此，我开始学习有角度的知识，并且刚刚开始研究服务和依赖注入。我创建了一个非常基本的服务，并试图使用提供程序来使用组件中的服务。但是，在组件中它给了我错误

找不到名称“ CourseService”

快速解决方案是将服务直接导入到组件中，但是我知道这是一种不好的做法，并且与服务和提供者的观点背道而驰。

app.module.ts

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CourseService } from './courses.service';

@NgModule({
  declarations: [
    AppComponent
  ],imports: [
    browserModule,AppRoutingModule
  ],providers: [CourseService],bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';
//import { CourseService } from './courses.service';


@Component({
  selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
export class AppComponent {
  CList:string[];

  constructor(service: CourseService){
    this.CList=service.getCourses();
  }
}

courses.service.ts

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class CourseService {
  getCourses(){
    return ["course1","course2","course3"];
  }
  constructor() {   
  }
}

编辑：我的印象是，直接导入不会使它成为单例，因此会破坏它。显然提供了root的权限。

解决方法

在app.component.ts中取消注释此行：

//import { CourseService } from './courses.service';

顺便说一句，如果您在可注入装饰器中将 providedIn 属性与'root'一起使用，则只需从app.module provider数组中删除服务，因为CoursesService将作为单例服务已经存在。

https://angular.io/api/core/Injectable#providedIn

angular dependency-injection provider