Angular 7 TypeError：service.x 不是函数答案

【问题标题】：Angular 7 TypeError: service.x is not a functionAngular 7 TypeError：service.x 不是函数
【发布时间】：2019-07-17 08:40:22
【问题描述】：

我创建了一个路由服务并想将它注入到我的导航组件中。但是当我在它上面调用一个方法时，它会抛出TypeError: routingService.getRequestedPage is not a function。昨天我在另一个服务上遇到了一个非常相似的问题，不幸的是我忘记了我是如何解决这个问题的。我用终端生成了它的服务。

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;
  }
}

【问题讨论】：

RoutingService 的导入是什么样的？
您是否尝试过将方法定义替换为“getRequestedPage(): string”
@Viqas 编辑帖子并添加导入声明
@MihirDave 这行得通！你能解释一下为什么吗？
并不是说这直接适用于上面描述的情况，但是由于服务之间的循环依赖，你会得到这个错误。

标签： angular typescript

【解决方案1】：

而不是将提供的部分放入 @Injectable() 然后在您的 app.module.ts 文件中添加提供者下的服务。那么当你写

constructor(private whateverService: WhateverService) {
}

在任何组件中，您都应该可以毫无错误地访问。我看到你在 sn-p 中将它作为私有，但那总是让我绊倒，所以在注入构造函数时确保它是私有的。

【讨论】：

这个有效，你能解释一下为什么这个有效而另一个无效吗？
我不太确定，因为我一直使用我描述的方法，但如果我不得不猜测我会说“providedIn：'root'”将允许您将它添加到任何模块提供程序数组和它与将其放入 app.module.ts 提供程序中的效果相同。不过不确定，所以您必须尝试确认。
除了 App.module 之外，您很可能还有其他模块。您正在尝试在其他模块之一中使用该服务。因此，providedIn: 'root' 将尝试使该服务在主模块中可用，而不是在您导入服务的实际组件模块中。

【解决方案2】：

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

我收到此错误： core.js:6210 ERROR 错误：未捕获（承诺中）：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;

【讨论】：