如何在 angular 6 的子组件中使用服务内部的方法

Question

在后端 API 中有一些数据。 从前端，我生成一个请求来读取这些后端数据并在前端显示。 为此，我创建了一个 Offer 组件和这个 Offer 组件的两个子组件，即通用和特殊组件。 我创建了一个服务，在其中我创建了一个方法，在我生成的方法中以获取与后端 API 连接的请求。 现在，当我尝试将此服务导入到该子组件时，我在 Visual Studio 代码中遇到编译失败错误，提示“错误在app/offers/general/general.component.ts:2:30 - error

TS2307：找不到模块“../event.service”

. 现在我的问题是“如何通过 angular 应用程序中的子组件使用服务”？ 在general.component.ts ->

 import { Component, OnInit } from '@angular/core'; import { EventService } from '../event.service'; @Component({ selector: 'app-general', templateUrl: './general.component.html', styleUrls: ['./general.component.css'] }) export class GeneralComponent implements OnInit { events = []; constructor(private _eventservice: EventService ) { } ngOnInit() { this._eventservice.showGeneralOffers().subscribe( res => this.events = res, err => console.log(err) ); } }

在 event.service.ts ->

 import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Injectable({ providedIn: 'root' }) export class EventService { private _generalOffersUrl = 'http://localhost:3000/api/general'; private _specialOffersUrl = 'http://localhost:3000/api/special'; constructor(private http: HttpClient) { } getGeneralOffers() { return this.http.get<any>(this._generalOffersUrl); } getSpecialOffers() { return this.http.get<any>(this._specialOffersUrl); } }

Answer 1

似乎是导入服务路径的问题。 （从 '../event.service' 导入 { EventService };）。 检查给定路径是否正确。

Answer 2

这似乎是一个简单的路径问题。 在generalComponent costructor中删除service的import，过EventService，会弹出一个弹框，点击quick fix，自动会写到正确的路径。

Answer 3

你导入的相对路径不对，改成，

import { EventService } from './event.service';