Angular Dependency Injection - 为什么需要导入？答案

【问题标题】：Angular Dependency Injection - Why is imports needed?Angular Dependency Injection - 为什么需要导入？
【发布时间】：2018-04-28 01:15:10
【问题描述】：

在下面的代码示例中，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 类的新实例。我不明白为什么组件中需要 import { DataService }？为什么 Angular 在看到构造函数中指定的 DataService 类型时不能将这个 DataService 实例提供给构造函数，因为 Angular 知道从 app.module 到哪里可以找到 DataService 类？ location.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();
  }
}

【问题讨论】：

如果不导入，你希望如何使用它？
我认为这根本与 Angular 无关。如果您尝试引用未在文件中的任何位置或全局定义的类，TypeScript 将无法编译。
我想我理解你的问题。这不是为什么需要导入，而是：为什么必须指定相同的导入 2x，一次在使用点（组件），一次在模块声明中。
是的，伊戈尔。可以从首先运行的 app.module 中的导入中获得对该对象的引用。为什么不能将这个引用自动传递给组件，并将实例提供给构造函数？
导入不是由 Angular 使用，而是由 typescript 编译器使用。编译器对组件和注入一无所知，但它想知道每当您在该类的定义所在的文件中提及类名时，它就可以加载它并检查语法错误等。假设locations.component也是错误的。从编译器的角度来看，ts 表示与 app.module.ts 相同的 DataService。

标签： typescript

【解决方案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();
  }
}

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

【讨论】：

其实你是在模块中指定它来注册为单例的，所以对它的每一个引用都是同一个引用
感谢伊戈尔的回答。 Zapl 上面的评论是我不理解的：typescript 和 angular 角色之间的区别。