使用 Injectable service 洞察另一个 Injectable service angular 5答案

【问题标题】：use Injectable service insight another Injectable service angular 5使用 Injectable service 洞察另一个 Injectable service angular 5
【发布时间】：2019-01-19 01:53:08
【问题描述】：

我正在努力使用 Injectable 服务洞察 Angular 5 中的另一个 Injectable 服务这是我的 crudService.ts ：

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

@Injectable()
export class CrudService
{
    constructor(
        private http: HttpClient
    ) { }

    postItem(url: any, body: any, headers?: any, params?: any)
    {
        return this.http.post<any>(url,
            body,
            {
                headers, params
            }
        );
    }
}

这是我在其中插入 crudService.ts 文件的 authentication.service.ts：

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

import { CrudService } from "../common/services/crudservice";

@Injectable()
export class AuthenticationService {
    constructor(
        private http: HttpClient,
        private crudService: CrudService
    ) { }

    login(username: string, password: string) {
        let url = "example";
        let body = "example";
        let headers = "example";
        return this.crudService.postItem(url, body, headers);
    }
}

和我只导入 CrudService 类的洞察 app.module.ts 文件：

import { CrudService } from "./common/services/crudService";
@NgModule({
    imports: [
        ...
    ],
    declarations: [
        ...
    ],
    providers: [
        ...,
        CrudService
    ],
    bootstrap: [AppComponent]
})

我的 CrudService 可注入导出类洞察 app.module.ts 文件。实际上，我尝试了不同的方案，例如同时导入两个类： CrudService 和 AuthenticationService 洞察 app.module.ts 以及其他方法... 在编译期间我没有任何错误，但是当我的应用程序启动时我有错误：

ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[LoginComponent -> AuthenticationService]: 
  StaticInjectorError(Platform: core)[LoginComponent -> AuthenticationService]: 
    NullInjectorError: No provider for AuthenticationService!
Error: StaticInjectorError(AppModule)[LoginComponent -> AuthenticationService]: 
  StaticInjectorError(Platform: core)[LoginComponent -> AuthenticationService]: 
    NullInjectorError: No provider for AuthenticationService!

如果有人已经解决了与使用一个 @Injectable() 类洞察另一个 @Injectable() 类并为 Angular 5 注册逻辑洞察 app.module.ts 相关的问题，请给我发送链接或一些场景可以遵循以成功编译、运行和使用 @Injectable() 类。如果我需要精确的东西，请问我，我会提供更多细节。谢谢

附：我的 AuthenticationService 被注入洞察 LoginComponent 类：

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';

import { AlertService, AuthenticationService } from '../_services/index';
import { CrudService } from "../common/services/crudservice";

@Component({
    moduleId: module.id,
    templateUrl: 'login.component.html'
})

export class LoginComponent implements OnInit {
    model: any = {};
    loading = false;
    returnUrl: string;

    constructor(
        private route: ActivatedRoute,
        private router: Router,
        private authenticationService: AuthenticationService) { }

    ngOnInit() {

    }


    login() {
        this.loading = true;
        this.authenticationService.login(this.model.username, this.model.password)
            .subscribe(
            resp => {

            },
            error => {

            });
    }
}

【问题讨论】：

你在哪里注入AuthenticationService？因为在 app.module 中，你只注入了CrudService，所以错误告诉你有No provider for AuthenticationService!
如前面的评论中所述，错误是告诉您您的AuthenticationService 没有提供者。这通常意味着您忘记将其包含在模块的 providers 数组中。
Alf Moh，DeborahK 我还添加了我注入 AuthenticationService 的 LoginComponent 代码。
所以如果我有结构： CrudService 被注入到 AuthenticationService 中，AuthenticationService 被注入到 LoginComponent 中。那么我需要在 app.module.ts 中添加哪些服务？我需要添加提供者洞察 login.component.ts 吗？谢谢我试图在 provider 和 login.component.ts 和 add.module.ts 中分别注入 CrudService ......也许我做错了什么
能上线 JSBIN 或者可以调试的东西就好了

标签： angular typescript angular-services injectable

【解决方案1】：

感谢 Alf Moh、DeborahK 和 Mark Uretsky。我找到了答案... 我从提供程序的 app.module.ts CrudService 类中删除并在 login.components.ts 中添加了该行：

providers: [AuthenticationService, CrudService]

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';

import { AlertService, AuthenticationService } from '../_services/index';
import { CrudService } from "../common/services/crudservice";

@Component({
    moduleId: module.id,
    templateUrl: 'login.component.html',
    providers: [AuthenticationService, CrudService]
})

export class LoginComponent implements OnInit {
    model: any = {};
    loading = false;
    returnUrl: string;

    constructor(
        private route: ActivatedRoute,
        private router: Router,
        private authenticationService: AuthenticationService) { }

    ngOnInit() {
    }

    login() {
        this.loading = true;
        this.authenticationService.login(this.model.username, this.model.password)
            .subscribe(
            resp => {

            },
            error => {

            });
    }
}

非常感谢您的建议。现在我明白了，对于使用@Injectable() 类洞察另一个@Injectable() 类，洞察使用这些类的组件应该是该类洞察“提供者”数组的声明。谢谢！

【讨论】：