每当我尝试从中调用方法时 Service 未定义

Question

我正在关注 Jogesh Muppala 在 Coursera 上的 Angular 课程，但我被困在第 4 周开始时，他正在使用 HttpClient 与服务器通信。

我完全按照说明进行操作，但他的说明似乎破坏了我的程序。 DishServices 是一种从服务器检索数据的服务，并被注入到其中一个组件中，该组件调用该服务来进行检索。但是，每当进行该调用时，页面上和控制台中都没有任何内容。

MenuComponent_Host.ngfactory.js? [sm]:1 错误类型错误：无法读取 未定义的属性“getDishes” 在 MenuComponent.push../src/app/menu/menu.component.ts.MenuComponent.ngOnInit (menu.component.ts:18) 在 checkAndUpdateDirectiveInline (core.js:9250) 在 checkAndUpdateNodeInline (core.js:10514) 在 checkAndUpdateNode (core.js:10476) 在 debugCheckAndUpdateNode (core.js:11109) 在 debugCheckDirectivesFn (core.js:11069) 在 Object.eval [as updateDirectives] (MenuComponent_Host.ngfactory.js?[sm]:1) 在 Object.debugUpdateDirectives [as updateDirectives] (core.js:11061) 在 checkAndUpdateView (core.js:10458) 在 callViewAction (core.js:10699)

碰巧，我更喜欢使用较旧的编写方式的提供程序，它在那里显示了一个错误。

  providers: [{provide: DishService,                useValue: new DishService()},
          {provide: PromotionService,           useValue: new PromotionService()},
          {provide: ProcessHTTPMessageService,  useValue: new ProcessHTTPMessageService()},
          {provide: 'BaseURL',                  useValue: baseURL}
        ],

DishService() 出现错误，表示它的参数数量错误。当我检查 DishService 时，

   import {Dish} from '../shared/dish';
   import {DISHES } from '../shared/dishes';
   import {Observable, of} from 'rxjs';
   import { delay } from 'rxjs/operators';

   import { map } from 'rxjs/operators';
   import { HttpClient } from '@angular/common/http';
   import { baseURL } from '../shared/baseurl';
   import { Injectable } from '@angular/core';


   export class DishService {

  constructor(private http: HttpClient) {

   }

  getDishes(): Observable<Dish[]>{
    return this.http.get<Dish[]>(baseURL + 'dishes');

  }

}

构造函数中有 HttpClient，这意味着它需要一个这样的对象来实例化。本教程未指定在提供程序中提供新的 HttpClient。我已经尝试切换到新的写作风格提供程序，在根目录下提供 Injectable，但没有成功。

编辑：MenuComponent 中的代码

import { Component, OnInit, Inject } from '@angular/core';
import { Dish } from '../shared/dish';
import {DishService} from '../services/dish.service';

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

    dishes: Dish[];

  constructor(private dishService: DishService, @Inject('BaseURL') private BaseURL) { }

  ngOnInit() {
    console.log("fkvjndf");
     this.dishService.getDishes().subscribe(dishes => this.dishes = dishes);
  }


}

编辑：

替换

  providers: [{provide: DishService,                useValue: new DishService()},
          {provide: PromotionService,           useValue: new PromotionService()},
          {provide: ProcessHTTPMessageService,  useValue: new ProcessHTTPMessageService()},
          {provide: 'BaseURL',                  useValue: baseURL}
        ],  

有

  providers: [{provide: DishService},
          {provide: PromotionService},
          {provide: ProcessHTTPMessageService},
          {provide: 'BaseURL', useValue: baseURL}
        ],  

并添加

@Injectable({
  providedIn: 'root'
})

到 DishService.ts

只是为了得到同样的错误信息

MenuComponent_Host.ngfactory.js? [sm]:1 ERROR TypeError: Cannot read property 'getDishes' of undefined at MenuComponent.push../src/app/menu/menu.component.ts.MenuComponent.ngOnInit (menu.component.ts:18) at checkAndUpdateDirectiveInline (core.js:9250) at checkAndUpdateNodeInline (core.js:10514) at checkAndUpdateNode (core.js:10476) at debugCheckAndUpdateNode (core.js:11109) at debugCheckDirectivesFn (core.js:11069) at Object.eval [as updateDirectives] (MenuComponent_Host.ngfactory.js? [sm]:1) at Object.debugUpdateDirectives [as updateDirectives] (core.js:11061) at checkAndUpdateView (core.js:10458) at callViewAction (core.js:10699)

Answer 1

问题是你在构造函数中定义了一个参数，但是当你调用new DishService()时你没有传递这个值。一般来说，你可以简化你的providers部分，应该能够解决你的问题同一回合。

providers: [
    DishService,
    PromotionService,,
    ProcessHTTPMessageService,
    {provide: 'BaseURL', useValue: baseURL}
],

如果您的提供者不需要任何特殊构造，您只需传入类，依赖注入框架就会为您处理依赖关系。

我不明白你为什么应该使用the older style of writing providers，但是如果你想让它更复杂，你需要使用工厂，一旦你需要依赖。但在我看来，在你的情况下这样做是没有意义的。

Answer 2

我认为您需要在您的服务类中添加 @Injectable() 装饰器，并在此代码之后添加这些装饰器。

   import {Dish} from '../shared/dish';
   import {DISHES } from '../shared/dishes';
   import {Observable, of} from 'rxjs';
   import { delay } from 'rxjs/operators';

   import { map } from 'rxjs/operators';
   import { HttpClient } from '@angular/common/http';
   import { baseURL } from '../shared/baseurl';
   import { Injectable } from '@angular/core';

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

  constructor(private http: HttpClient) {

   }

  getDishes(): Observable<Dish[]>{
    return this.http.get<Dish[]>(baseURL + 'dishes');

  }

}

由于 'providedIn' 标志，不需要将此服务放置在根模块的 NgModule 装饰器的提供者选项中（例如：app.module），并且还必须在 NgModule 装饰器的导入选项中添加 HttpClientModule。希望这会有所帮助。