Question

我在我的组件中导入我的服务但由于某种原因它让我找不到模块。

这是 selectHotel.component.ts

import { Component } from '@angular/core';
import { GetHotelService } from '/src/app/services/gethotel/getHotel.service'; //Error Here

@Component({
    moduleId: module.id,
    selector: 'selectHotel',
    templateUrl: 'selectHotel.component.html',
    providers: [GetHotelService]
})
export class selectHotelComponent  {  }

这是 getHotel.service.ts

import {Injectable} from '@angular/core';
import {Http} from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
    export class GetHotelService {
        constructor(private http: Http){
            console.log('Init');
        }
    }

我的项目文件夹视图就像这样

Proj＆gt; src＆gt; app＆gt;组件＆gt; selectHotel＆gt; selectHotel.component.ts

Proj＆gt; src＆gt; app＆gt;服务＆gt; gethotel＆gt; getHotel.service.ts

我在这里做错了什么？

Answer 1

导入路径应该相对于当前文件

尝试：

import { GetHotelService } from '../../services/gethotel/getHotel.service';

Answer 2

在导入项目中编写的项目时，最好使用相对路径。

将您的GetHotelService导入更改为

import { GetHotelService } from '../../services/gethotel/getHotel.service';

前导..（或其他情况下为./）表示这是相对导入。

PS。

不要过于迂腐，但您可能希望查看项目的不同文件夹结构 - 通常最好将与特定功能相关的项目组合在一起，而不是将它们分组类型。换句话说，将您的酒店服务与您的酒店组件放在同一个文件夹中，而不是将所有服务分组在一起并与您的组件分开。

See the Angular Style guide了解更多信息。

将服务链接到组件

2 个答案: