組件無法識別通過依賴項注入傳遞的我的服務（角度）

Question

從昨天開始，我一直在關注Angular教程（ https://www.lynda.com/Angular-tutorials/Building-providing-service/540347/553419-4.html ），現在我開始使用服務。

名為MediaServiceService的Service類存儲在文件media-service.service.ts中，如下所示：

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

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

  constructor() { }

    get(){
    return this.mediaItems;
}
add(mediaItem){
    this.mediaItems.push(mediaItem);
}
delete(mediaItem){
    let index = this.mediaItems.indexOf(mediaItem);
    if(index >= 0){
        this.mediaItems.splice(index, 1);
    }
}

mediaItems = [
    {
        id: 1,
        name: "Firebug",
        medium: "Series",
        category: "Science Fiction",
        year: 2010,
        watchedOn: 1294166565384,
        isFavorite: false
    },
    {
        id: 2,
        name: "The Small Tall",
        medium: "Movies",
        category: "Comedy",
        year: 2015,
        watchedOn: null,
        isFavorite: true
    }, {
        id: 3,
        name: "The Redemption",
        medium: "Movies",
        category: "Action",
        year: 2016,
        watchedOn: null,
        isFavorite: false
    }, {
        id: 4,
        name: "Hoopers",
        medium: "Series",
        category: "Drama",
        year: null,
        watchedOn: null,
        isFavorite: true
    }, {
        id: 5,
        name: "Happy Joe: Cheery Road",
        medium: "Movies",
        category: "Action",
        year: 2015,
        watchedOn: 1457166565384,
        isFavorite: false
    }
];
}

本教程未隨附Injectable裝飾器，因為本教程未使用角度CLI，但我使用了。

我去了app.module.ts並按如下所示導入了服務：

import { MediaServiceService } from "./media-service.service";

然后在我的提供者的@NgModule裝飾器的元數據屬性上，仍在我的app.module.ts中：

providers: [
  MediaServiceService,
],

現在，當我將服務添加到我的組件之一時，問題就來了。 我嘗試導入服務並將其通過構造函數注入，該類最終如下所示：

import {Component, OnInit} from '@angular/core';
import {MediaServiceService} from "../media-service.service";

@Component({
selector: 'app-media-item-list',
templateUrl: './media-item-list.component.html',
styleUrls: ['./media-item-list.component.css']
})
export class MediaItemListComponent implements OnInit{

mediaItems;

constructor(mediaService: MediaServiceService){

}

ngOnInit(): void {
    this.mediaItems = this.mediaService.get();
}

onMediaItemDelete(mediaItem) {
    this.mediaService.delete(mediaItem);
}


}

我在過去的項目中使用Ionic中的angular進行了一段時間的工作，我知道這是依賴注入的工作方式，甚至視頻中的人也是如此，但是由於某些原因，它一直給我帶來錯誤：

TS2339：類型“ MediaItemListComponent”上不存在屬性“ mediaService”。

我正在使用PHPStorm作為我的IDE，這已經引起了我的一些小錯誤，所以我想也許只是關閉並重新打開它才能解決問題，但是並沒有

像錯誤所說的那樣，我的工作是創建一個名為mediaService的變量，然后在構造函數中，將注入的MediaService分配給變量，如下所示：

mediaService;
constructor(mediaService: MediaServiceService){
    this.mediaService = mediaService;
}

這樣做確實有效，但是我仍然懷疑為什么我必須這樣做（如果以前從未這樣做過）。

我做錯什么了嗎？ 為什么我的依賴項注入“沒有正常工作”？

Answer 1

如果您打算在構造函數之外使用mediaService，請通過將構造函數更改為來聲明它：

constructor(private mediaService: MediaServiceService){

}

Answer 2

您忘記對構造函數設置私有：

constructor(private mediaService: MediaServiceService){

}