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

Question

In backend API some data is there. From front-end, i generate to get a request to read those backend data and show in front-end. For this, i created an Offer component and two child components of this offer component ie general & special component. I created one service, within that i created one method, inside the method i generate to get a request to connect with backend API. Now when i am trying to import this service to that child component i am getting compilation to fail error in visual studio code saying "ERROR in app/offers/general/general.component.ts:2:30 - error

TS2307: Cannot find module '../event.service'

. Now my question "how to use a service by a child component in the angular application"? in 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) ); } }

in 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

Seems like issue with the importing service path. (import { EventService } from '../event.service';). Check given path is correct or not.

Answer 2

It seems a simple path problem. Delete import of service in generalComponent costructor, go over EventService, a popup will come out, and click on quick fix, automatically will write the right path.

Answer 3

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

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