无法在angular4中注入依赖注入答案

【问题标题】：Not able to inject Dependency Injection in angular4无法在angular4中注入依赖注入
【发布时间】：2018-11-29 15:08:31
【问题描述】：

我有一个这样的课程

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

【问题讨论】：

为什么不将@Injectable() 添加到musicindustry 类。即使您不需要它，它也是最佳实践
我也试过了，还是不行
好吧，尝试将musicindustry 类移到文件顶部。即在moviindustry之前。
嗯，可以了，谢谢

标签： angular angular-dependency-injection

【解决方案1】：

您的代码存在一些严重问题。完全不是Angular Style Guide.

它打破了很多规则，比如单一责任主体； Service Class 的名称应该是 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')
  }

}

这里有一个Working Sample StackBlitz 供您参考。

【讨论】：

【解决方案2】：

将musicindustry 类移到moviindustry 类上方，以便更好地解决moviindustry 类的依赖关系。此外，即使您没有 DI，也可以为提供者添加 @Injectable() 装饰器。

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

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

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

【讨论】：