0

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

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

我想HeroService在HeroDetailComponent.

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

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

但我不喜欢HeroService使用相对 URL 来引用。相反，我希望它像这样绝对：

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

我将如何做到这一点？

4

2 回答 2

0

请注意如何在不需要相对路径的情况下导入 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' },
};
于 2016-06-01T04:36:08.993 回答
-1

您可以使用以下内容：

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

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

于 2016-03-09T14:36:12.563 回答