导入注射剂和Angular服务

如何解决导入注射剂和Angular服务

我正在学习Angular中的Injectables和Services，并且不清楚有关Importable的某些导入和默认特征。具体来说，什么时候应该使用Angular服务：

具有@Injectables标签吗？我看过一篇不使用它的博客文章。当您不使用它时会发生什么？不使用该标签会如何改变服务的行为方式？
要在app.module中的providers数组中声明吗？
要在单个组件的providers数组中声明，而不是在app.module中声明吗？
使用@Injectables标记时，providerIn关键字的默认值是什么？如果您的服务中未定义此关键字，那么该关键字的值和服务范围应假定为什么？
说我有一个具有以下特征的服务（我们称其为DummyService）：具有@Injectables标记，未定义providerIn，未在任何提供程序数组中声明（app.module或任何单个组件）。
- 5.a）由于未指定providerIn并且未在任何提供者数组中声明该服务，因此可以与同级组件共享该服务吗？
- 5.b）从导入了DummyService的组件调用DummyService时，与这些用例有何区别：

DummyService.addToList("Stacy");

constructor(private _dummyservice: DummyService){} 
ngOnInit(){
 this.dummyservice.addToList("Stacy");
}

解决方法

1。） @Injectable装饰器，将一个类标记为可提供并作为依赖项注入。（摘自：https://angular.io/api/core/Injectable）

表示该类可以与Injector一起使用。但是，除非您使用该服务的提供者配置Angular依赖项注入器，否则Angular实际上不会在任何地方注入它。这可以在@Injectable，@NgModule()或@Component()

内完成

2。） 在app.module的providers数组中声明服务与@Injectable({providedIn: 'root'})相同。您无需同时执行这两项操作。建议使用providedIn作为新的/当前的方法。

3。） Angular中的服务可以是单例，因此，如果您在app.module中提供服务，则可以在任何地方访问该服务，并且它始终是同一实例。如果您在组件级别提供服务，则每个组件实例都会获得自己的服务实例。

@Component({providers: [DummyService],...})
export class FooComponent {
  constructor(
    private readonly _dummyService: DummyService,) {}
}

本质上与

相同

@Component(...)
export class FooComponent {
  private readonly _dummyService = new DummyService();
  constructor() {}
}

除了后者不使用Angular的DI。

4。） {providedIn: 'root'}，如果未设置providedIn，则必须通过providers-array设置服务。

5。） Angular DI无法解决您的服务。看到这里：https://stackblitz.com/edit/angular-ivy-c48sfa?file=src/app/app.module.ts

要深入回答更多...

@Injectable装饰器将您的服务注册到注入器。将服务标记为可注入意味着可以将其他服务注入到该服务中。如果省略它，则可以安全地提供和注入服务，但是如果尝试注入它，则angular会向您抛出错误。不过，通常，最佳做法是将所有服务标记为@Injectable()，无论是否注入它们。

providedIn: 'root'

是注册单例服务或只希望拥有一个共享应用程序实例的服务的首选方式，它或多或少地等同于将其添加到app.module中的providers数组。但是，如果要使用像工厂提供程序这样的特殊提供程序，则要使用app.module providers数组。 providedIn: 'root'对于延迟加载的模块也很有用，因为angular的早期迭代在延迟加载的模块上有一些问题，这些延迟加载的模块具有自己的提供程序数组，这些服务获得不同的服务副本，这些服务副本将成为单例。 providedIn选项可以很好地解决此问题。
在组件中提供意味着该组件将获得其自己的给定服务实例，并且该组件的所有孩子也将收到该给定服务实例。如果仅在app.module（或root）级别提供，则所有组件都将在整个应用程序范围内获得相同的服务。您可以在根和组件级别提供适当的信息，但您应该知道它的作用（常见的情况是某种全局警报与本地警报服务）。
providerIn的“默认”为空。如果忽略它，则必须在提供者数组中适当声明服务以注入和使用它。除非您将其声明为root提供或放入provider数组，否则它没有作用域。
如果未提供服务，则无法注入该服务，句号停止。问题5a和5b都无关紧要，因为无法注入服务。您的示例似乎是以静态方式访问服务方法的，这通常是一个坏主意。真正注入您打算使用的服务以使依赖项注入对您的应用有用。

@Injectable({
  providedIn: 'root',})

上面的代码讲角度，学习此类并将其加载到进样器/容器中，可以将其视为组件顶部的容器。 Angular将自动为我们创建每个服务的单个实例。我们不会像

dummy= new DummyService()

angular将为我们制造它，并使它可用于注射器容器内的所有不同组件。这将使代码可重复使用。

因此，只要有人在任何组件中调用DummyService，Angular都会交付DummyService的实例。您可以在组件类的构造函数中手动创建它。

依赖注入的目的是使测试更容易并使代码可重用。

如果转到浏览器并检查编译器，请转到定义类的行，您将看到以下内容：

AppComponent.ctorParameters=() ⇒  {type:_dummy_service__WEBPACK_IMPORTED_MODULE_2__[“DummyService” ]} ]

打字稿文件中的所有代码在打字稿编译器甚至在浏览器中执行之前都已得到处理。然后，webpack将接管所有这些类型，所有注释，所有公共和私有内容。由于您的浏览器不知道如何理解打字稿。类组件构造函数自变量也像上面的新属性一样被删除。