组件无法识别通过依赖项注入传递的我的服务（角度）

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){

}