导入组件和模块的简短方法

Question

我用@ angular / cli来创建我的应用程序。当我的应用程序大小增加时，很难提及使用的组件/模块/ scss的导入路径

例如，如果组件结构足够深入。要导入，我们必须提及import {something} from '../../../../someComponent'。

我们是否可以在某处定义它们，就像可以定义模式一样

例如：

Schema.json

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

我们可以直接导入为import {someComponent} from '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

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

您可以在docs

中阅读更多内容

Answer 2

paths可以添加到tsconfig.json：

中

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

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

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