时间戳

首页 > 解决方案 > 无法在angular4中注入依赖注入

angular - 无法在angular4中注入依赖注入

问题描述

我有一个像这样的课程

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

@Injectable()
export class moviindustry {
    constructor(private music:musicindustry) { }
    producer() {
        this.music.album();     
        alert('moviindustry producer');
    }
    directort() {
        alert('moviindustry directort');
    }
    crew() {
        alert('moviindustry crew');
    }
}


export class musicindustry {
    album() {
        alert('album')
    }
}

我已经像这样在 NgModule 中注册了这个类

@NgModule({
  declarations: [
    AppComponent,
    ComponentAComponent
  ],
  imports: [
    BrowserModule,
    HttpModule
  ],
  providers: [  
    moviindustry,
    musicindustry
  ],  
  bootstrap: [AppComponent]
})
export class AppModule { }

现在，当我尝试像这样访问课程时

export class AppComponent {   
  constructor(private movies:moviindustry){
    this.movies.producer();    
  }
}

我收到以下错误

未捕获的错误：无法解析 moviindustry 的所有参数：(?)。在 syntaxError (compiler.es5.js:1694)

根据文档， Injectable() 用于为类注入依赖注入，那为什么我不能使用它呢？具有讽刺意味的是，当我在构造函数中使用 http 时，我的应用程序被编译，有人可以帮助我理解这一点

笔记：

我也不能这样使用

constructor(@Inject(musicindustry) private music:musicindustry) { }

标签： angularangular-dependency-injection

解决方案

您的代码存在一些严重问题。它根本不符合Angular Style Guide。

它打破了很多规则，比如Single Responsibility Principal；服务类的名称应为 UpperCamelCase 等。

以下是如何适当地重构代码以使其工作：

为这两个服务创建两个不同的文件：

电影服务：

import { Injectable } from '@angular/core';
import { MusicService } from './music.service';

@Injectable()
export class MovieService {

  constructor(private music: MusicService) { }

  producer() {
    this.music.album();
    alert('moviindustry producer');
  }

  directort() {
    alert('moviindustry directort');
  }

  crew() {
    alert('moviindustry crew');
  }

}

音乐服务：

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

@Injectable()
export class MusicService {

  album() {
    alert('album')
  }

}

这是您参考的工作示例 StackBlitz。

推荐阅读