如何在Angular 2中避免使用非常长的相对路径进口？ [英] How to avoid imports with very long relative paths in Angular 2?

问题描述

如何引入像'my-app-name / services'这样的东西，以避免像以下导入的行？

How can I introduce something like 'my-app-name/services' to avoid lines like the following import?

import {XyService} from '../../../services/validation/xy.service';

推荐答案

TypeScript 2.0 +

在TypeScript 2.0中，您可以在 tsconfig.json 中添加 baseUrl 属性：

{
    "compilerOptions": {
        "baseUrl": "."
        // etc...
    },
    // etc...
}

然后，您可以像基本目录一样导入所有内容：

Then you can import everything as if you were in the base directory:

import {XyService} from "services/validation/xy.service";

此外，您可以添加路径属性，它允许你匹配一个模式，然后映射出来。例如：

On top of this, you could add a paths property, which allows you to match a pattern then map it out. For example:

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "services/*": [
                "services/validation/*"
            ]
        }
        // etc...
    },
    // etc...
}

这将允许您从任何地方导入它，如下所示：

Which would allow you to import it from anywhere like so:

import {XyService} from "services/xy.service";

从那里，您将需要配置您正在使用的任何模块加载器来支持这些导入名称。现在，TypeScript编译器似乎没有自动映射出来。

From there, you will need to configure whatever module loader you are using to support these import names as well. Right now the TypeScript compiler doesn't seem to automatically map these out.

您可以在 github问题。还有一个 rootDirs 属性，在使用多个项目时很有用。

You can read more about this in the github issue. There is also a rootDirs property which is useful when using multiple projects.

我发现使用重新导出文件可以更容易。这是我做的：

I've found it can be made easier by using "re-export files". Here's what I do:

1. 在每个父文件夹中，创建与该文件夹中每个文件夹相同名称的文件。


2. 在这些文件中，重新导出子文件夹中与文件名称相同的每个文件。

示例

在您的情况下，首先创建一个名为 my-app-name / services / validation的文件.TS 。在这个文件中，请输入以下代码：

In your case, first create a file called my-app-name/services/validation.ts. In this file, have the code:

export * from "./validation/xy.service";

然后创建一个名为 my-app-name / services.ts 并具有以下代码：

Then create a file called my-app-name/services.ts and have this code:

export * from "./services/validation";

现在您可以使用您的服务：

Now you can use your service like so:

import {XyService} from "./../../../services";

一旦你有多个文件，它会变得更加容易：

And once you have multiple files in there it gets even easier:

import {XyService, MyOtherService, MyOtherSerivce2} from "./../../../services";

必须保留这些额外的文件是一个更多的工作，但我已经发现它是免费的最终减少工作。执行主要的目录结构更改更容易，并减少您必须执行的导入数量。

Having to maintain these extra files is a bit more work upfront, but I've found it pays off in the end with less work. It's much easier to do major directory structure changes and it cuts down on the number of imports you have to do.

注意

当这样做时，您需要注意以下几点：

When doing this there's a few things you have to watch for and can't do:

1. 您必须注意循环转口。因此，如果两个子文件夹中的文件相互引用，则需要使用完整路径。


2. 您不应将文件夹返回到导出的导出文件来自同一原始文件夹的文件（例如，在验证文件夹中的文件中，从./../验证; ）执行 import {XyService}。我发现这一点，第一点可能导致未定义的导入错误。


3. 最后，您不能在具有相同名称的子文件夹中有两个导出。通常这不是一个问题。

1. You have to watch for circular re-exports. So if files in two sub-folders reference each other, then you'll need to use the full path.
2. You shouldn't go back a folder to a re-export file that exports files from the same original folder (ex. being in a file in the validation folder and doing import {XyService} from "./../validation";). I've found this and the first point can lead to errors of imports not being defined.
3. Finally you can't have two exports in a sub-folder that have the same name. Usually that isn't an issue though.

你可以看到一个真正的例子，使用这里。

You can see a real example of this being used here.

这篇关于如何在Angular 2中避免使用非常长的相对路径进口？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！