typescript - 从另一个模块导入服务

标签 typescript angular5 angular-providers ng-modules

在使用 AngularJS 1.x 框架开发 2 年后,我目前正在学习 Angular 框架(第 5 版),所以我问自己很多问题,其中一个是正确导入另一个模块提供的服务的方法那是我的申请之一。

假设我有一个提供 MyService 服务的 CoreModule,假设该项目有以下文件树:

app/
   app.module.ts
   ...
pages/
   clients/
      clients.component.html
      clients.component.css
      clients.component.ts
   ...
core/
   core.module.ts
   providers/
      my-service.service.ts

现在假设我的clients 页面需要从CoreModule 模块注入(inject)MyService 服务。为此,我将把 MyService 放在 CoreModule 模块的提供程序列表中。我将在我的 AppModule 中导入 CoreModule

如果我很好理解,通过执行这样的导入,我会告诉我的应用程序在 AppModule 的 .ts 文件中需要时使用 MyService 服务> 模块。

但我无法理解的是在我的应用程序代码中包含声明服务的 .ts 文件。事实上,如果我想使用 MyService 服务,我会在我的 Clients 类中做类似的事情:

constructor(private service: MyService) {
   // using of the injected service
}

但是 TypeScript 需要声明服务的 .ts 文件的引用。我的第一个尝试是按照文件树导入文件:

import { MyService } from '../../core/providers/my-service.service';

但这对我来说感觉不对,因为当我导入 Angular 服务时,我不必指定路径来访问声明相关服务的文件。 HttpClient 服务示例:

import { HttpClient } from '@angular/common/http';

实际上,我希望能够通过引用模块而不是通过传递 .ts 文件的路径来在我的应用程序页面中导入我的核心服务。

那时,我不知道这是否可能,或者我是否误解了其他模块的服务使用。

最佳答案

当你这样做的时候

constructor(private service: MyService) {
   // using of the injected service
}

您正在向此类中注入(inject)依赖项。这意味着,Angular 将创建一个 MyService 类的实例,并在创建时将其传递给组件的构造函数。

当你这样做的时候

import { MyService } from '../../core/providers/my-service.service';

这只是告诉 TypeScript 这样的类存在,你指的是哪个类,并且还允许 TypeScript 正确地执行类型检查。它只不过是指向确切的 MyService 类位置的指针,因为您可能在不同的文件中有多个具有此类名称的类。

我不会说 HttpClient 是一个服务,只是一个普通的类助手。

因此,所有的工作仍然在构造函数声明级别完成。这是为了 Angular 和依赖注入(inject)。额外导入主要针对 TypeScript。

关于typescript - 从另一个模块导入服务,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47521414/

相关文章:

html - 如何更改滚动 ionic 内容的颜色?

javascript - 如何将变量从 Electron 传递到后面的 Angular

angular - 在 angular5 中使用 sw 预缓存时排除子站点 url

angular - 如何使用 Angular cli 和 webpack 安装 ng2-completer

javascript - ExpressionChangedAfterItHasBeenCheckedError 解决方法

java - 从服务传递到组件的 Angular 错误消息

javascript - 如何在 Angular Material V6 中列出国际电话号码?

angularjs - 如何防止 AngularJS 应用程序中重复的 $http 请求?

javascript - 当我使用 ngroute 时,Angular 'Unknown provider error'(工厂文件)

javascript - 当服务注入(inject)到其他地方时,Angular 提供者配置重置