providedIn 属性在 Angular 服务不工作

Question

I am learning Angular DI, But The Provided Example ( https://angular.io/guide/providers#providedin-and-ngmodules ) Is Not Working Can Anyone Help me In Understanding Here Is The Link Of The Stackblitz I Am Working On. https://stackblitz.com/edit/angular-ivy-k1gvth Thanks, Keshav

Answer 1

You need to add AppService to your providers array in app.module.ts as specified in the docs.

Answer 2

You can use provideIn value as root . With that no need to provide in app module.

 providedIn: 'root'

If you want to add this in app.module.ts then remove Injectable decorator from service and add in providers list of app.module.ts.

You can read official documentation for more details. https://angular.io/guide/singleton-services

Also You can't give module name in providedin. There are predefined options for that 'root', 'any' and 'platform'. You can read more at https://angular.io/api/core/Injectable

Answer 3

You need to add providers in the app.component.ts file. I have added the snippet below and it working fine.

import { Component, VERSION } from '@angular/core';
import { AppServiceService } from './app-service.service';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  providers: [AppServiceService]
})
export class AppComponent  {
  name = 'Angular ' + VERSION.major;
  constructor(ser: AppServiceService) {
      this.name = ser.sayHello();
  }
}