0

我正在努力使用 Injectable 服务洞察另一个 Injectable 服务 Angular 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() 类。如果我需要精确的东西，请问我，我会提供更多细节。谢谢

PS 我的 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 => {

            });
    }
}
4

1 回答 1

0

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

于 2018-08-11T22:19:03.890 回答