Angular 7 类型错误：service.x 不是一个函数。

Question

我制作了一个路由服务，并想将它注入到我的导航组件中。但当我调用其中的一个方法时，它会抛出TypeError: routingService.getRequestedPage不是一个函数。昨天我遇到了一个非常类似的问题，不幸的是我忘记了如何解决它。我是通过终端生成服务的。

src/app/nav/nav.component.ts 构造函数：

constructor(private templateService: TemplateService, private routingService: RoutingService) {
    this.getTemplates();
    if (this.routingService.getRequestedPage() === 'home') {
      this.showHome();
    }
  }

src/app/nav/nav.component.ts 的导入：

import {RoutingService} from '../shared/routing.service';

src/app/shared/routing.service.ts:

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

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

  private requestedPage: string;

  constructor() {
    this.requestedPage = 'home';
  }

  requestPage(page: string) {
    this.requestedPage = page;
  }

  getRequestedPage() {
    return this.requestedPage;
  }
}

- keesjanbertus

---

你的 RoutingService 的导入是什么样子的？ - ViqMontana

你尝试过将方法定义替换为 "getRequestedPage(): string" 吗？ - Mihir Dave

@Viqas 编辑了帖子并添加了导入语句。 - keesjanbertus

@MihirDave 这个方法可行！你能解释一下为什么吗？ - keesjanbertus

请注意，这并不直接适用于上述情况，但是由于服务之间存在循环依赖关系，您可能会遇到此错误。 - Neoheurist

Answer 1

不要放置providedIn部分，只需放置@Injectable()，然后在您的app.module.ts文件中将服务添加到providers下。这样，在编写代码时，就可以

constructor(private whateverService: WhateverService) {
}

In any component you should have access without errors. I see you have it as private in the snippet but thats one that always trips me up so make sure its private when injecting into the constructor.

- Matt

---

这个可以工作，你能否解释一下为什么这个可以工作而另一个不行？ - keesjanbertus

我并不完全确定，因为我一直使用我描述的方法，但如果我必须猜测，我会说 "providedIn：'root'" 会允许你将其添加到任何模块的提供程序数组中，并且它会实现与将其放置在 app.module.ts 提供程序中相同的效果。不过不确定，所以你需要尝试确认一下。 - Matt

很可能除了App.module之外，您还有其他模块。而且您正在尝试在其中一个其他模块中使用该服务。因此，providedIn: 'root' 将尝试使该服务在主模块中可用，而不是实际组件模块，在该模块中导入了该服务。 - Sam Tomashi

Answer 2

这个问题也可能是由于创建了循环依赖引起的。如果将服务A注入到服务B中，而将服务B注入到服务A中，则从服务B调用A.foo()将导致错误“ A.foo()不是一个函数”。实际上，A将无法正确实例化并且没有任何方法或属性。

- nirutha

Answer 3

哦，天啊，我也遇到了这个错误...在我的app.module.ts文件中，我有一个useFactory构造函数的顺序问题：

我收到了这个错误： core.js: 6210 ERROR Error：Uncaught（in promise）：TypeError：appConfig.get不是函数TypeError：appConfig.get不是函数

失败：

useFactory:
                (
                    permissionService: NgxPermissionsService
                    appConfig: AppConfigService, //the order matters
                ) =>
                async () => {
const promise = await appConfig
                            .get()
                            .toPromise()
                            .then((x) => {
                                //console.log('app.module.ts: toPromise.then() Env:', x);
                                appConfig.setConfig(x);
                                return x;
                            }); //await toPromise causes the env to be updated before running the rest of the code
                        return promise;

成功：

useFactory:
                (
                    appConfig: AppConfigService, //the order matters
                    permissionService: NgxPermissionsService
                ) =>
                async () => {
const promise = await appConfig
                            .get()
                            .toPromise()
                            .then((x) => {
                                //console.log('app.module.ts: toPromise.then() Env:', x);
                                appConfig.setConfig(x);
                                return x;
                            }); //await toPromise causes the env to be updated before running the rest of the code
                        return promise;

- Omzig