angular2 : "import", 注入和接口

Question

我已经掌握了 angular2，虽然我对各种概念有很好的总体理解，但 DI 和导入有些混乱。

首先，我将 class（我们称之为 "foo"）导入到组件 ("bar")

中

import { Component, OnInit } from '@angular/core';
import { Baz } from './foo';

@Component({
  templateUrl: './my.component.html',
  styleUrls: ['./my.component.css']
});

export class bar implements OnInit {
  private baz:Baz;

  ngOnInit():void {
    this.baz = new Baz();    
  }
}

然后我开始阅读有关此模式有多糟糕的信息：如果我需要更改 Baz 的构造函数，我将需要重新访问 Baz 所在的所有代码 "newed"。

所以，开始考虑注射 Baz ..

我给Baz添加了@Injectable()，然后把组件改成了read

import { Component, OnInit } from '@angular/core';
import { Baz } from './foo';

@Component({
  templateUrl: './my.component.html',
  styleUrls: ['./my.component.css'],
  providers: [Baz]
});

export class bar implements OnInit {
  private baz:Baz;

  constructor(private baz:Baz) {}

  ngOnInit():void {}
}

这很好用。

然而，这让我开始思考：DI 的全部意义在于允许您/应用程序/测试框架在需要时提供它自己的 "Baz" 版本。

因此，import { Baz } from './foo'; 变得有问题，因为这是一个 "concrete" 实现并且与特定的 class.

密切相关

说了这么多，我的问题是

我应该使用接口而不是直接导入吗？
如果是这样，作为一个全局接口会更好吗（。d.ts），“/// 参考”或接口定义的简单导入 ?
是否应该在组件中定义 "providers" 部分，子模块或模块级别？ - 还是取决于 "Baz" 的使用范围？

Answer 1

你真的应该阅读 Angular DI。

不过可以帮你：

我应该使用接口而不是直接导入吗？ 你什么意思？ javascript 中没有接口这样的东西，这只是 Typescript 中的一个奇特的东西，它只是为了帮助提供工具而创建的。

"providers" 部分应该在组件、子模块或模块级别定义吗？ - 还是取决于 "Baz" 的使用范围？

您提供的 Injectable class 越往上，越往下的组件将获得相同的实例。

您在根级别提供一个 IC（可注入 Class，例如服务），所有子组件都将获得相同的实例，除非它们单独提供它。

简而言之，如果您不提供，DI 会查找您的父级为您找到该服务。

因此，如果您有保存服务或服务本身不包含任何状态，请将其放在根级别，无需在组件级别提供。

angular2 : "import", 注入和接口

angular2 : "import", inject and interfaces

angular

angular2-services