导入组件和模块的快捷方式

Question

当我的应用程序大小增加时，很难提到组件/模块/scss的导入路径

例如，如果组件结构足够深。要导入，我们必须提到从“../../../../someComponent”导入{something}继续。

有没有一种方法可以像定义模式一样定义它们

例如：

Schema.json

{
"someComponent":"../../../../someComponent',
 "otherComponent:"../../"
}

我们可以直接从'someComponent'导入为import{someComponent} 并且可以在任何地方轻松导入

有这样的方法吗。




Answer 1

您可以在应用程序中使用桶。

例如，您可以使用以下组件：

// heroes/folder/deep/another/deep/folder/hero.component.ts
export class HeroComponent {}

现在，您可以在项目的任何文件夹中定义桶，该文件夹导出此模块（按约定称为索引）

export * from './heroes/folder/deep/another/deep/folder/hero.component.ts'; // relative path to current folder

您可以根据需要定义任意多的桶。

您可以在文档中阅读更多内容

Answer 2

路径可以添加到tsconfig.json中：

{
  "compilerOptions": {
    ...,  
    "paths": {
      ...,
      "@app/*": ["app/*"],
      "@components/*": ["components/*"]
    }
  }
}

然后从app/或components/绝对导入，而不是相对于当前文件导入：

import {TextInputConfiguration} from "@components/configurations";