Question

我有一个打字稿界面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提供了错误＆＃34;＆＃39; IBreadcrumbNavigation＆＃39;仅指一种类型，但在此处被用作值。＆＃34;

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

是否有一个很好的解决方法，或者我只需要将接口直接显式导入每个组件？

Answer 1

如果它不是组件，管道，指令，模块，则只导入所需模块中的接口。必须导出接口

in'./interfaces/breadcrumbNavigation';

export interface IBreadcrumbNavigation {
   ...
}

在其他模块的x组件中，您只导入界面

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

Answer 2

对此有一个很好的解决方法，

与错误消息一样，接口实际上并未声明运行时存在的任何内容。它们纯粹在编译时存在于TypeScript中并被删除。因此将它们放在装饰器的数组中是没有意义的，因为那些 do 在运行时存在。

听起来像转换为类可以修复它，但很可能你应该导出这些接口的具体实现者。

From the docs：

添加declarable 类     - 组件，指令和管道 - 到declarations列表。

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

我只需要将接口直接显式导入每个组件吗？

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

Answer 3

不可能，因为它们存在于运行时中，一种解决方法是导出IBreadcrumbNavigation而不是Import

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

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

然后创建一个公共api文件以这样访问它

export * from './lib/SharedModule ';

然后在组件上您可能会这样

import {IBreadcrumbNavigation } from 'publicApi';

从Angular模块导出Typescript接口

3 个答案: