Question

以下是示例项目的目录结构：

HeroDetailComponent

我想在HeroService中使用HeroDetailComponent。

目前，我使用以下语句将import {HeroService} from '../../services/hero.service'导入HeroService：

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

但我不想使用相对网址引用{{1}}。相反，我希望它像这样绝对：

{{1}}

我将如何实现这一目标？

Answer 1

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

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

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

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

请注意，map中的路径不是typescript文件的路径，而是typescript编译器放置JS文件的路径。然后，此设置允许您导入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' },
};

Answer 2

您可以使用以下内容：

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

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

使用绝对URL导入Angular2组件

2 个答案: