如何将 TypeScript 类集中导入 Angular 模块?

格雷厄姆

是否有推荐的方法将 TypeScript 类导入 Angular 模块,以便该模块中的每个组件或服务都继承这些定义?

核心问题是“为什么导入到模块中的类不会自动导入到该模块中的其他组件中?”

我尝试将一个类导入到模块中,如下所示:

注册.model.ts:

export class Event {
  id: string;
  name: string;
}

注册.module.ts:

import { Event } from './registration.model';

我还将它添加到模块中的声明中,但没有任何效果(我一发现它什么也没做就从声明数组中删除了它):

declarations: [
    Event,
    ...
]

注册.service.ts:

getEvents(): Observable<Event[]> {

  return this.http.get(`api/events`)
    .map(response => response.json());

}

产生此错误并且应用程序无法编译:

C:/code/registration/src/app/registration/registration.service.ts (26,29) 中的错误:找不到名称“事件”。

如果我将导入直接添加到 registration.service.ts 中,那么错误就会消失并且一切都可以正确编译:

import { Event } from './registration.model';

我已经验证模块中的相对路径是正确的。我可以将其更改为模块中的绝对路径,并且会在服务中遇到相同的错误。

后续编辑感谢阿德里安的回应,我现在对这一点有了更好的理解。我还发现您可以从 TypeScript 模块一次导入多个类,如下所示:

import * as Registration from 'app/models/registration.model'; 
阿德里安·法丘

这不是它的工作原理。为了在应用程序的其他部分使用 Event 模型类,您需要在每个部分中导入它。是否使用 NgModule 无关紧要。

NgModule 由Angular 编译器使用,但在它到达该步骤之前,TypeScript 编译器需要处理您的代码。

在要使用它的每个文件中,您都需要导入它,就像在模块中所做的一样(可能每种情况下的路径都不同):

import { Event } from './registration.model';

否则 TypeScript 将不知道 Event 是什么以及从哪里获取它。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何将javascript AMD模块导入外部TypeScript模块?

来自分类Dev

将Angular JavaScript模块导入TypeScript

来自分类Dev

将AMD模块导入Angular 2 TypeScript模块

来自分类Dev

无法在TypeScript中导入模块

来自分类Dev

TypeScript如何在Web Worker中导入外部模块

来自分类Dev

如何在Angular 2中导入命名空间的TypeScript类?

来自分类Dev

如何在 Angular 4 中导入自定义模块?

来自分类Dev

如何将angular.js模块导入Angular应用程序?

来自分类Dev

如何将模块中的类公开给TypeScript中的全局名称空间?

来自分类Dev

在TypeScript中导入时“找不到模块”

来自分类Dev

如何使TypeScript对扩展从“节点模块”导入的类感到满意?

来自分类Dev

如何知道从哪个python模块类中导入的?

来自分类Dev

如何将子模块中的类/函数相互导入?

来自分类Dev

如何在TypeScript中使用ES6模块语法导入angular.IInjectorService

来自分类Dev

如何将模块导入jsx?

来自分类Dev

如何将模块导入xcode

来自分类Dev

类不是Angular模块-仅在IntelliJ / Webstorm中导入本地构建的Angular库时

来自分类Dev

没有类型定义的情况下如何在Typescript中导入节点模块?

来自分类Dev

如何在TypeScript中导入名称空间前缀等于自己名称空间后缀的模块(别名)?

来自分类Dev

当类型定义未声明模块时,如何在 TypeScript 中导入库?

来自分类Dev

如何将单spa浏览器内实用程序模块导入TypeScript宗地项目

来自分类Dev

如何将单spa浏览器内实用程序模块导入TypeScript宗地项目

来自分类Dev

如何在Typescript中正确导入模块?

来自分类Dev

如何在Angular 9中导入所有Angular Material模块

来自分类Dev

如何将参数传递给TypeScript模块?

来自分类Dev

TypeScript编译器省略了导入的angular-translate模块

来自分类Dev

如何使用Typescript和NodeJS将模块注入类

来自分类Dev

如何使用Typescript和NodeJS将模块注入类

来自分类Dev

导入TypeScript模块

Related 相关文章

  1. 1

    如何将javascript AMD模块导入外部TypeScript模块?

  2. 2

    将Angular JavaScript模块导入TypeScript

  3. 3

    将AMD模块导入Angular 2 TypeScript模块

  4. 4

    无法在TypeScript中导入模块

  5. 5

    TypeScript如何在Web Worker中导入外部模块

  6. 6

    如何在Angular 2中导入命名空间的TypeScript类?

  7. 7

    如何在 Angular 4 中导入自定义模块?

  8. 8

    如何将angular.js模块导入Angular应用程序?

  9. 9

    如何将模块中的类公开给TypeScript中的全局名称空间?

  10. 10

    在TypeScript中导入时“找不到模块”

  11. 11

    如何使TypeScript对扩展从“节点模块”导入的类感到满意?

  12. 12

    如何知道从哪个python模块类中导入的?

  13. 13

    如何将子模块中的类/函数相互导入?

  14. 14

    如何在TypeScript中使用ES6模块语法导入angular.IInjectorService

  15. 15

    如何将模块导入jsx?

  16. 16

    如何将模块导入xcode

  17. 17

    类不是Angular模块-仅在IntelliJ / Webstorm中导入本地构建的Angular库时

  18. 18

    没有类型定义的情况下如何在Typescript中导入节点模块?

  19. 19

    如何在TypeScript中导入名称空间前缀等于自己名称空间后缀的模块(别名)?

  20. 20

    当类型定义未声明模块时,如何在 TypeScript 中导入库?

  21. 21

    如何将单spa浏览器内实用程序模块导入TypeScript宗地项目

  22. 22

    如何将单spa浏览器内实用程序模块导入TypeScript宗地项目

  23. 23

    如何在Typescript中正确导入模块?

  24. 24

    如何在Angular 9中导入所有Angular Material模块

  25. 25

    如何将参数传递给TypeScript模块?

  26. 26

    TypeScript编译器省略了导入的angular-translate模块

  27. 27

    如何使用Typescript和NodeJS将模块注入类

  28. 28

    如何使用Typescript和NodeJS将模块注入类

  29. 29

    导入TypeScript模块

热门标签

归档