繁体   English   中英

外部包中的 Angular 服务 - 依赖注入 HttpClient 未定义

Angular service in external package - dependency injection HttpClient undefined

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

假设您有以下 Angular 库:

第一个库,一个基础服务库:

// base.service.ts

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export abstract class BaseService {
  constructor(private httpClient: HttpClient) {}

  protected request(): Observable<any> {
    return this.httpClient.request('GET', 'http://127.0.0.1:3100/CRM/v1/customers');
  }
}

第二个图书馆:

// test.service.ts

import { Injectable } from '@angular/core';
import { BaseService } from '@company/data-access-base';
import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export abstract class TestService extends BaseService {
  testRequest(): Observable<any> {
    return this.request();
  }
}

然后你决定在你的应用程序中使用 TestService 。

当然,您已经在应用程序的 app.module.ts 中导入了HttpClientModule 然后你注入 TestService 并尝试使用它:

import { Component, OnInit } from '@angular/core';
import { TestService } from '@company/data-access-test';

@Component({
  selector: 'comp-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss'],
})
export class HomeComponent implements OnInit {
  constructor(private testService: TestService) {}

  ngOnInit() {
    this.testService.testRequest().subscribe((r) => console.log('Test ok', r))
  }
}

在这里,您在控制台中收到以下错误:

core.js:4610 ERROR TypeError: Cannot read property 'request' of undefined
    at TestService.request (company-data-access-base.js:42)
    at TestService.testRequest (company-data-access-crm.js:7)
    at HomeComponent.ngOnInit (home.component.ts:13)
    at callHook (core.js:3405)
    ...

如何在 BaseService 中注入 HttpClient?

1 个回复

反过来,考虑到应用程序中注入的服务是TestService ,这就是 Angular(据我所知任何其他框架的 DI 系统)将管理的服务。

因此,简单的解决方案,只需为每个服务添加一个构造函数,然后调用 super.(httpService)。

// test.service.ts

import { Injectable } from '@angular/core';
import { BaseService } from '@company/data-access-base';
import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export abstract class TestService extends BaseService {

  // that's what was missing
  constructor(protected httpClient: HttpClient) {
    super(httpClient);
  }

  testRequest(): Observable<any> {
    return this.request();
  }
}
1 角服务依赖注入

我需要有关如何将服务注入到我拥有的另一服务中的帮助。 设置如下: 这是我的bootstrapModule所在的main.ts: 这是InstrumentationService和DTService的详细信息: 我WinService问题是,我想在DTService使用名为 ...

2 Angular 2依赖项注入不适用于服务

我正在尝试从Angular 2中的UserService获取静态数据。从文档看一切正常,但由于某种原因它无法正常工作。 这是我的UserComponent.ts 这是我的UsersService.ts 如预期的那样,其输出应为 但它不会在* ngFor循环上重复。 ...

3 Angular 6 服务中未定义 HttpClient 实例

我有一个包装HttpClient的服务。 该服务由组件调用。 问题是,当我在组件构造函数中注入服务时,它是undefined 。 此外,服务构造函数似乎根本不执行,因为console.log不打印任何内容。 有任何想法吗? 相关模块定义如下: 调用服务的组件: 和组件模块: ...

2018-07-20 22:56:15 3 4683   angular
6 @input装饰器而不是Angular中的依赖项注入服务

据我了解,当从数据库或具有恒定值的类中获得持久数据时,我们应该使用依赖注入,因为我们可以在要实例化的类的构造函数中将服务作为参数发送。 该服务不需要实例化,也不需要作为参数传递,因为它知道从何处获取数据,并且要使用的类将在实例化时立即调用它。 但是,当信息不是永久性的也不是常量时,我​​ ...

8 依赖注入:没有类型的服务

我试图将我的应用程序中的问题分开,我认为Steven的这个答案非常适合我的场景,但我正在尝试删除ninject元素: 验证:如何使用Ninject注入模型状态包装器? 我已经从答案中添加了所有必需的类。 我有我的服务: 我的配置服务: 问题我在调用validation ...

10 DB服务的依赖注入

我有 DI 问题。 我有自定义类,应该通过服务将一些数据导入数据库。 如果我在 Blazor 组件中使用此服务,它与 @injection 一起工作得很好。 但是我无法在我的自定义类中使用它。 我试过这样 在 startup.cs 是这样注册的服务。 如果我调用 ImportXml _ac ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM