Question

我已经掌握了angular2，虽然我对各种概念有一个很好的理解，但DI和导入有些令人困惑。

首先，我导入了一个班级（让他们称之为＆＃34; foo＆＃34;）到一个组件中（＆＃34; bar＆＃34;）

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所有的代码＆＃34; newed＆＃34;。

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

我向Baz添加了@Injectable()，然后将组件更改为

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的全部意义在于让你/应用程序/测试框架能够提供它自己的版本＆＃34; Baz＆＃34;如果需要的话。

因此，import { Baz } from './foo';变得有问题，因为这是一个具体的＆＃34;实施并与特定班级联系在一起。

在漫无目的之后，我的问题就是

我应该使用接口而不是直接导入吗？
如果是这样，它会更好地作为全局接口（.d.ts），＆＃34; /// 参考＆＃34;或者简单地导入接口定义？
＆＃34;提供商＆＃34;部分在组件中定义，子模块或模块级别？ - 或者这取决于广泛的＆＃34; Baz＆＃34;正在使用？

Answer 1

你应该阅读Angular DI。

但是要帮助你：

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

＆＃34;提供商＆＃34;部分是在组件，子模块还是模块级别定义的？ - 或者这取决于广泛的＆＃34; Baz＆＃34;正在使用？

您提供Injectable类的根目录越远，进一步向下的组件就会获得相同的实例。

您在根级别提供IC（可注入类，E.g服务），除非他们单独提供，否则所有子组件都将获得samle实例。

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

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

angular2：＆＃34;导入＆＃34;，注入和接口

1 个答案: