Angular 6：使用providedIn: 'root'的服务在组件中返回空对象

Question

我的服务位于 src/core/services/api.service.ts

。

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class ApiService {

  constructor() { }

  test() {
    console.log('hello from services');
  }
}

我正在尝试从另一个模块中的组件调用此服务。 home.component.ts

import { Component, OnInit } from '@angular/core';
import {ApiService} from './core/services/api.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor(private api: ApiService) { }

  ngOnInit() {
    console.log(this.api);
  }

}

但是我得到了一个空对象，像这样 ApiService {}。

- shellakkshellu

---

如果记录的是 ApiService {}，那么这就是一个 ApiService 实例，正如预期的一样。您可以在对象的原型下找到 test 方法。你确定这不起作用还是只是猜测？ - briosheje

没错！看这个，这个 https://stackblitz.com/edit/angular-aizqtq 的 ApiService 运行良好。 - qiAlex

你的代码看起来运行得非常好，不需要做任何更改。 - Sunil Singh

另外，如果您不想进行任何调用，请执行：console.log(this.api instanceof ApiService);，如果它记录为true，则表示它有效。 - briosheje

Answer 1

因此，它返回一个对象，这意味着服务已经正确初始化，而不是console.log(this.api)；请尝试console.log(this.api.test())，您应该在控制台中看到来自服务的问候。

- Mac_W

Answer 2

我的服务中有一些未使用的导入。

删除这些导入并重新启动ng serve对我很有效。

- Alok

Answer 3

将 'ApiService' 添加为 'app.module.ts' 中的提供者。 在其他模块中，从提供者部分中删除此服务。 现在服务将被正确初始化。

- Pax Beach

Answer 4

我在 Angular 8 中也遇到了同样的问题。

我在函数前面添加了 public，然后它就开始工作了：

public test()

- dale