Question

我有一个(?:Section3)，它将HeaderComponent形式的对象作为其输入属性。

{title: string, short_desc: string}

以下是我如何定义将传递给@Component({ selector: 'header', templateUrl: './header.component.html', styleUrls: ['./header.component.scss'] }) export class HeaderComponent implements OnInit { @Input() data: { title: string, short_desc: string }; constructor() { } ngOnInit() { } }的数据：

HeaderComponent

现在，我需要在很多组件中使用@Component({ templateUrl: './my-custom.component.html', styleUrls: ['./my-custom.component.scss'] }) export class MyCustomComponent implements OnInit { public headerData: {title: string, short_desc: string}; constructor() { this.headerData = { title: 'Settings Page', short_desc: 'Update your settings', } } ngOnInit() { } }。所以我创建了一个文件HeaderComponent，如下所示：

header-data.ts

为了使export interface HeaderData { title: string; short_desc: string; }工作，在每个使用它的组件中，我需要导入HeaderComponent接口。当我决定重构我的应用程序时，这有时看起来很丑陋并且可能会破坏。

我的问题是：如何使用HeaderData接口而不需要像HeaderData那样丑陋的嵌套导入，或者内联对象类型定义。或者也许我做的不是解决这个问题的最好方法吗？

Answer 1

你显然注意到你通常如何从一行中的@angular / ...模块中导入多个Angular类。这是Barrel功能。请查看Angular文档中的Barrel file description。

在阅读该文本时，您必须了解JavaScript模块和Angular模块之间的区别。前者是源文件，后者是用@NgModule装饰的类。

由于interface不是JavaScript概念，而是TypeScript中的抽象，因此仅在编辑器和转换期间需要它。模块加载器不使用接口文件声明。因此，您可以使用技巧并将其声明为TypeScript定义。

将您的文件重命名为 header-data.d.ts ，然后使用declare代替export，如下所示。

declare interface HeaderData {
  title: string;
  short_desc: string;
}

因此TypeScript将能够在设计时找到HeaderData名称。此技巧依赖于"**/*.d.ts"文件中"include"数组中的tsconfig.spec.json行。

角度应用中的共享接口/数据类型

1 个答案: