时间戳

首页 > 解决方案 > 如何使用来自另一个模块的 Angular 接口进行验证和智能感知

angular - 如何使用来自另一个模块的 Angular 接口进行验证和智能感知

问题描述

我在 Angular 5 应用程序的一个模块中有一系列 UI 小部件组件。一个单独的应用程序模块使用这些小部件，并且需要为每个小部件提供一个配置对象。在我的编辑器（VS Code）中创建配置对象时，我希望编辑器验证配置对象并提供智能感知。

理想情况下，我想在其 component.ts 文件中为每个小部件定义一个界面 - 以这种方式同时更新组件和界面很容易。或者，我可以有一个接口文件。

我知道在编译时不使用接口。我只是希望它们在我的应用程序模块中设置配置对象时可用。做这个的最好方式是什么？

选项 A：命名空间
根据这篇文章，我一直在研究命名空间。Config我喜欢从多个文件添加到单个命名空间的想法。但是，我在 SO 上看到了一些类似这个答案的观点，说命名空间很糟糕。

因为我相信命名空间是 TS 的东西，而不是 Angular 的东西，所以我试过这个：

config.namespace.ts（目前是一个文件——一旦可行，我会尝试将它分发到多个文件。）

export namespace Config {
    export interface Breadcrumbs {
      responsive: boolean;
      links: BreadcrumbLink[];
    }
    interface BreadcrumbLink {
      label: string;
      link?: string;
    }
}

应用配置.service.ts

/// <reference path="/path/to/config.namespace.ts" />

@Injectable()
export class AppConfigService {
  config: any = {};
  constructor() { }

  configureWidgets() {
    const breadcrumbWidget: Config.Breadcrumbs = {
      'responsive': true,
      'links': [
        { 'label': 'Home', 'link': 'http://...' },
        { 'label': 'Main Section', 'link': 'http://...' },
        { 'label': 'Current Page' },
      ]
    };
    this.config.breadcrumbs = breadcrumbWidget;

不幸的是，它没有拉出 Config 命名空间以在编辑器中使用。

选项 B：.d.ts 文件
我是这个概念的新手，但它看起来像是在定义 package.json 然后引入并使其普遍可用的类型。这可能有效，但这意味着我无法将接口保留在每个小部件的文件中，就在它们最有用的地方。此外，大多数关于 .d.ts 文件的文章都假设您正在为包设置类型，但这里并非如此。

选项C：直接导入各个接口

import { Breadcrumbs } from './path/to/config.namespace.ts'

这行得通，但感觉不对。如果我将每个接口与它的 widget.component.ts 文件一起保存，这将导致一长串接口导入和特定路径。另外，我相信导入主要是为了引入您将在应用程序中使用的其他功能，而不仅仅是为了在 IDE 中使用方便？

标签： angularinterface

解决方案

我最终选择了选项 C 的版本，但使用桶文件来简化导入。每个小部件的 component.ts 文件都包含一个在配置时使用的界面。然后桶文件重新导出所有这些文件：

export { Breadcrumbs } from './path/to/component';
export { Button } from './path/to/component';
export { DialogButton } from './path/to/component';

然后，在为每个小部件设置配置的服务中，我从桶文件中导入所有内容：

import * as Config from '../../path/to/barrel/widget-interfaces.index';

最后，当我为新小部件创建配置对象时，我声明了所需的接口：

    const app_breadcrumbs: Config.Breadcrumbs = {
      responsive: true,
      links: [
        { label: 'Home', link: '//www.homeurl.com/index.html' },
        { label: 'Main Section', link: '//www.homeurl.com/main-section/main.html' },
        { label: 'Current Page' }
      ]
    };

我正在使用 VS 代码，它会在我开始键入时建议键并验证类型和对象形状是否正确。

推荐阅读