ОШИБКА Ошибка: StaticInjectorError (AppModule): NullInjectorError: Нет поставщиков для - PullRequest
Новая
       34

ОШИБКА Ошибка: StaticInjectorError (AppModule): NullInjectorError: Нет поставщиков для

0 голосов
/ 03 февраля 2019

Привет, я совершенно новичок в angular и столкнулся с проблемой при попытке использовать службу в родительском компоненте.

Ниже приведен код, где " recipe.component.ts"это мой родительский класс", recipe-list.component.ts"это мой дочерний класс и, наконец," recipe.service.ts"это класс обслуживания.

Все, что я хочу сделать - это использовать сервис из класса обслуживания через родительский компонент с использованием " provider " в родительский компонент .

Я считаю, что использование «провайдеров» в родительском компоненте поможет другим дочерним компонентам использовать тот же экземпляр класса.

Я не знаю, для некоторыхПричина, по которой я сталкиваюсь с ошибкой ниже.

Вещи, которые я пробовал:

  1. Пытался разместить Провайдеров в дочернем компоненте recipe-list.component.ts , и это работает.
  2. Пытался поместить провайдеров в app.module.ts , но все же я сталкиваюсь с упомянутой ниже ошибкой.

Ваша помощь очень ценится.Заранее спасибо! 

ERROR Error: StaticInjectorError(AppModule)[RecipeListComponent -> RecipeService]: 
  StaticInjectorError(Platform: core)[RecipeListComponent -> RecipeService]: 
    NullInjectorError: No provider for RecipeService!
    at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:3228)

recipe.component.ts 

import { Component, OnInit } from '@angular/core';
import { RecipeModel } from './recipe.model';
import { RecipeService } from './recipe.service';

@Component({
  selector: 'app-recipe',
  templateUrl: './recipe.component.html',
  styleUrls: ['./recipe.component.css'],
  providers: [RecipeService]
  })
export class RecipeComponent implements OnInit {

  recipeDetails: RecipeModel;

  constructor(private recipeService: RecipeService) { }

  ngOnInit() {
  }

  onReceiveSecondEvent(recipeEvent: RecipeModel){
    this.recipeDetails= recipeEvent
  }
}

recipe-list.component.ts ## 

import { Component, OnInit,Output,EventEmitter } from '@angular/core';
    import { RecipeModel } from '../recipe.model';
    import { RecipeService } from '../recipe.service';

    @Component({
      selector: 'app-recipe-list',
      templateUrl: './recipe-list.component.html',
      styleUrls: ['./recipe-list.component.css'],

    })
    export class RecipeListComponent implements OnInit {
      @Output() SecondRecipeEvent= new EventEmitter<RecipeModel>();
      recipes: RecipeModel[];

      constructor(private recipeService: RecipeService) { 

      }

      ngOnInit() {
        this.recipes= this.recipeService.getRecipe();
      }

      onReceiveEvent(recipe: RecipeModel){

        this.SecondRecipeEvent.emit(recipe)

      }
    }

рецепт.service.ts 

import { RecipeModel } from './recipe.model';

export class RecipeService{

    recipes: RecipeModel[]=[    

        new RecipeModel('Cake Recipe','A recipe for Chocolate Cake',
        'recipeCake.png')
      ];

      getRecipe(){
          return this.recipes.slice();
      }
}
...