Question

我正在努力使用可注射服务洞察力在角度5中使用另一种可注射服务这是我的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);
    }
}

和见解app.module.ts文件，我仅导入CrudService类：

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（）类。如果我需要精确的东西，请问我，我将提供更多详细信息。谢谢

P.S。我的AuthenticationService注入了InsightLoginComponent类：

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 => {

            });
    }
}

Answer 1

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

providers: [AuthenticationService, CrudService]

login.components.ts看起来像这样：

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（）类，洞察使用这些类的组件应该是该类洞察“提供者”数组的声明。谢谢！

使用可注射服务洞察力另一个可注射服务角度5

1 个答案: