使用绝对 URL 导入 Angular2 组件

Question

示例项目目录结构如下：

app
|-components
| |-hero-detail
| | |-hero-detail.component.ts (HeroDetailComponent)
|-services
| |-hero.service.ts (HeroService)

我想在 HeroDetailComponent 中使用 HeroService。

目前我正在使用以下语句将 HeroService 导入 HeroDetailComponent：

import {HeroService} from '../../services/hero.service'

但我不喜欢用亲戚 URL 来指代 HeroService。相反，我希望它像这样绝对：

import {HeroService} from 'app/services/hero.service'

我将如何实现？

Answer 1

您可以使用以下内容：

import {HeroService} from '/app/services/hero.service'

假设 app 是您的 Web 服务器的根文件夹。

Answer 2

注意到如何在不需要相对路径的情况下导入 Angular 包了吗？例如：import {Component} from '@angular/core';。您可以对您的服务做同样的事情！

如果您使用的设置类似于 Angular 站点 (https://angular.io/guide/quickstart) 上的快速入门，则您在第 4 步中将以下内容放入 index.html：

您可以使用此脚本配置 SystemJS 并使用非相对路径告诉它在哪里可以找到您的服务。转到 https://angular.io/guide/quickstart 和 select SystemJS 选项卡以查看快速启动文件的配置方式。您可以将自定义映射添加到 map 数组。例如，添加 'myservices': 'app/services' 会使数组看起来像：

var map = {
    'app':      'app',
    '@angular':     'node_modules/@angular',
    'rxjs':         'node_modules/rxjs',
    'myservices':   'app/services'
};

注意map中的路径不是typescript文件的路径，而是typescript编译器放置JS文件的路径。此设置应该允许您导入 class CustomService 存在于 custom.service.ts 文件中 Import {CustomService} from 'myservices/custom.service'

如果导入失败，返回 SystemJS 配置并确保在 packages 数组中，您已注册 app 并将 defaultExtension 设置为 js。以下摘录自快速入门指南：

var packages = {
    'app':  { main: 'main.js',  defaultExtension: 'js' },
    'rxjs': { defaultExtension: 'js' },
};

使用绝对 URL 导入 Angular2 组件

Importing Angular2 Components with Absolute URLs

angular

angular2-directives

angular2-services