角度依赖注入 - 为什么需要进口?

时间:2018-04-27 15:30:42

标签: typescript

在下面的代码示例中,app.module设置用于Angular依赖注入的提供程序。 Angular因此具有对DataService类的引用。

// app.module.ts 
import { DataService } from './services/dataService';
import { LocationsComponent } from './components/locations.component';
@NgModule({
  declarations: [
    AppComponent,
    LocationsComponent,
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
  ],
  providers: [
    DataService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

我的理解是在locations.component中Angular将执行DI以在构造函数中创建DataService类的新实例。我不明白为什么组件中需要导入{DataService}?为什么Angular在看到构造函数中指定的DataService类型时不能将此DataService实例提供给构造函数,因为Angular从app.module知道在哪里可以找到DataService类? locations.component中的import {DataService}似乎是多余的。

// locations.component.ts
import { DataService } from '../../../services/dataService';
@Component({
  selector: 'app-locations',
  templateUrl: './locations.component.html'
})
export class LocationsComponent {
  data: any[] = [];
  constructor(private dataService: DataService) { 
      this.data = dataService.load();
  }
}

1 个答案:

答案 0 :(得分:1)

我想我理解你的问题。这不是为什么需要进口,而是:

  

为什么必须在使用点(组件)指定相同的导入2x,在模块声明中指定一次。

从技术上讲,您不必在模块中指定服务的导入。 @Component属性可以采用选项providers值,您可以指定组件的依赖项。如果这样做,则不必在模块中声明与模块中的依赖项相同的服务。

import { DataService } from '../../../services/dataService';
@Component({
  selector: 'app-locations',
  templateUrl: './locations.component.html',
  providers: [DataService],

})
export class LocationsComponent {
  data: any[] = [];
  constructor(private dataService: DataService) { 
      this.data = dataService.load();
  }
}

在模块中指定它的原因是使用角度依赖注入框架在模块中注册服务。否则,每次要注入相同类型时,都必须执行上述操作(在组件级别注册)。通过在模块级别注册该类型,它还将注入相同的服务实例,从而有效地创建类似单一的模式。