Question

从昨天开始，我一直在关注Angular教程（https://www.lynda.com/Angular-tutorials/Building-providing-service/540347/553419-4.html），并且我已经开始使用服务了。

Service类，名为MediaServiceService，存储在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";

然后在我的app.module.ts里面的@NgModule装饰器的我的提供者元数据属性：

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中的角度工作了一段时间，我知道这是依赖注入应该如何工作，甚至视频中的人也是这样做的，但由于某种原因它仍然保持给我错误：

TS2339：Property＆＃39; mediaService＆＃39;类型＆＃39; MediaItemListComponent＆＃39;。
上不存在

我使用PHPStorm作为我的IDE并且它导致了我的小错误，所以我想可能只是关闭并重新打开它会修复它但它没有

我的工作是，像错误一样，创建一个名为mediaService的变量，在我的构造函数中，我将注入的MediaService分配给我的变量，如下所示：

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

这确实有效，但我仍然怀疑为什么我必须这样做，如果我以前从未这样做过。

我做错了什么吗？为什么我的依赖注射不能正常工作＆＃39;

Answer 1

如果您计划在构造函数外部使用mediaService，请通过将构造函数更改为：

来声明它

constructor(private mediaService: MediaServiceService){

}

Answer 2

你忘了把私人放在你的构造函数上：

constructor(private mediaService: MediaServiceService){

}

组件无法识别依赖注入传递的服务（Angular）

2 个答案: