从Angular模块导出Typescript接口

Question

我有一个Typescript接口IBreadcrumbNavigation需要翻译并导出。我可以使用import { IBreadcrumbNavigation } from 'app/shared/interfaces/breadcrumbNavigation';在Angular组件中进行调用。

然而，该组件模块已经导入了一个SharedModule。为了避免在每个使用该接口的组件中都显式导入它，我想把IBreadcrumbNavigation接口放在SharedModule中。

在我的SharedModule中，我有：

import { IBreadcrumbNavigation } from './interfaces/breadcrumbNavigation';

@NgModule({
    declarations: [
        IBreadcrumbNavigation
    ],
    exports: [
        IBreadcrumbNavigation
    ]
})
export class SharedModule { };

TypeScript给出了这个错误："'IBreadcrumbNavigation'只是一个类型的引用，但在这里被用作值。"

如果我将IBreadcrumbNavigation从接口更改为类，则该错误消失。

有没有好的解决方法，或者我只需要直接将接口导入到每个组件中?

- HaveSpacesuit

---

我们能看到组件模块吗？ - Emeka Obianom

Answer 1

如果它不是组件、管道、指令或模块，你只需在想要的模块中导入接口。接口必须被导出，位于'./interfaces/breadcrumbNavigation'中。

export interface IBreadcrumbNavigation {
   ...
} 

在其他模块中的 x 组件中，你只需要导入接口。

import { IBreadcrumbNavigation } from 'pathToOtherModule/interfaces/breadcrumbNavigation';

- alehn96

Answer 2

这是一个问题，有没有好的解决方法？

如错误消息所述，接口实际上在运行时并不存在任何声明。它们仅存在于TypeScript编译期间，并被消除。因此，将它们放入装饰器的数组中是没有意义的，因为那些东西在运行时确实存在。

听起来转换为类可能是解决问题的方法，但很可能你应该导出这些接口的具体实现者。 文档中提到：

将 可声明的 类（组件、指令和管道）添加到 declarations 列表中。

在应用程序的精确一个模块中声明这些类。如果它们属于这个模块，请在 此 模块中声明它们。

---

“我是否只需要在每个组件中直接显式导入接口？”

是的，您需要这样做-请记住，NgModule不会自动为您导入其他ECMAScript / TypeScript模块。在模板之外，您必须自己处理这个问题。

- Daniel Rosenwasser

Answer 3

它们存在于运行时，因此不可能。一个解决方法是导出IBreadcrumbNavigation而不是导入。

export{ IBreadcrumbNavigation } from './interfaces/breadcrumbNavigation';

@NgModule({
    declarations: [
        IBreadcrumbNavigation
    ],
    exports: [
        IBreadcrumbNavigation
    ]
})
export class SharedModule { };

那么创建一个公共的API文件来像这样访问它。

export * from './lib/SharedModule ';

那么在组件上，您可以像这样操作：

import {IBreadcrumbNavigation } from 'publicApi';

- Frederick Rosales