无法解析LoginService的所有参数：Angular 5

Question

我是新手。 尝试解决此问题，因为无法解决LoginService的所有参数

这是我的登录服务课程

import { Injectable } from '@angular/core';
import { LoginViewModel as loginVM } from "../../viewmodel/app.login.viewmodel"
import { Data as LoginVmData } from '../../viewmodel/app.loginVm'
import { HttpClient, HttpHeaders } from "@angular/common/http";
import { Observable } from 'rxjs';
@Injectable()
export class LoginService {

    private loginUrl = "Account/Authentication";
    private registerUrl = "Account/Registration";

    private _httpClientModule: HttpClient;
    private _loginVmData: LoginVmData;

    constructor(httpClientModule: HttpClient, loginVmData: LoginVmData ) {
        this._httpClientModule = httpClientModule;
        this._loginVmData = loginVmData;
    }


    public LoginHttpCall(): Observable<loginVM> {

        const headers = new HttpHeaders().set('Content-Type', 'application/json; charset=utf-8');

        return this._httpClientModule.post<loginVM>(this.loginUrl, this._loginVmData, { headers });
    }

    public registerHttpCall(_loginVM: LoginVmData): Observable<loginVM> {

        const headers = new HttpHeaders().set('Content-Type', 'application/json; charset=utf-8');

        return this._httpClientModule.post<loginVM>(this.registerUrl, _loginVM, { headers });
    }

}

自从我以来，在Google中搜索并发现一些由于循环依赖而导致的提示。 我无法弄清楚我的情况下循环依赖在哪里。

这是调用登录服务的登录组件

import { Component } from '@angular/core';
import { AppComponent } from "../app/app.component";
import { LoginService } from "../../service/account/app.service.account.login";
import { LoginViewModel } from "../../viewmodel/app.login.viewmodel";
import { Data as LoginVmData } from "../../viewmodel/app.loginVm";
import { Router } from "@angular/router";
declare var componentHandler: any;
@Component({
    selector: 'login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.css'],
    providers: [LoginService]
})
export class LoginComponent {
    private _appComponent: AppComponent;
    private _loginService: LoginService;
    private _loginViewModel: LoginViewModel;
    private _loginVmData: LoginVmData;
    private _router: Router;
    constructor(private appComponent: AppComponent, loginService: LoginService, loginViewModel: LoginViewModel, loginVm: LoginVmData, router: Router) {
        this._appComponent = appComponent;
        this._appComponent.menulist = false;
        this._loginService = loginService;
        this._loginViewModel = loginViewModel;
        this._loginVmData = loginVm;
        this._router = router;

    }

    ngOnInit() {
        componentHandler.upgradeAllRegistered();

    }

    save(modelValue: LoginViewModel, isValid: boolean) {
        if (isValid) {
            this._loginService.LoginHttpCall().subscribe(item => {
                this._loginViewModel.isSuccess = item.isSuccess;
                this._loginViewModel.message = item.message;
                this._loginViewModel.data.userName = item.data.userName;
                this._loginViewModel.data.profilePic = item.data.userName;
                this._loginViewModel.data.isAdmin = item.data.isAdmin;
                if (item.data.isAdmin && item.isSuccess) {
                    this._router.navigate(['/dashboard']);
                } else if (item.isSuccess) {
                    this._router.navigate(['/home'])
                }
            },
                err => {
                    console.log("Error occured.");
                });
        }
    }


}

APP.Shared.Module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';
import { AppComponent } from './components/app/app.component';
import { EqualValidator } from "./components/Validation/equal.validator.directive";
import { HomeComponent } from './components/home/home.component';
import { LoginComponent } from './components/usercreation/login.component';
import { MobileComponent } from './components/mobile/mobile.component';
import { SocialComponent } from './components/usercreation/social.component';
import { RegisterComponent } from './components/usercreation/signup.component';
import { DashBoardComponent } from './components/dashboard/dashboard.component';

@NgModule({
    declarations: [
        AppComponent, RegisterComponent, EqualValidator, DashBoardComponent,
        HomeComponent,
        LoginComponent,
        MobileComponent,
        SocialComponent
    ],
    imports: [
        CommonModule,
        HttpClientModule,
        FormsModule,
        RouterModule.forRoot([
            { path: '', redirectTo: 'home', pathMatch: 'full' },
            { path: 'home', component: HomeComponent },
            { path: 'login', component: LoginComponent },
            { path: 'mobile', component: MobileComponent },
            { path: 'dashboard', component: DashBoardComponent },
            { path: 'signup', component: RegisterComponent },
            { path: '**', redirectTo: 'home' }
        ])
    ]
})
export class AppModuleShared {
}

最后一个App.Component.ts

import { Component } from '@angular/core';
import { DashBoardComponent } from "../../components/dashboard/dashboard.component";
import { LoginViewModel } from "../../viewmodel/app.login.viewmodel";
@Component({
    selector: 'app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],

})
export class AppComponent {
    public menulist: boolean = true;
    private _dashBoard: DashBoardComponent;
    public _loginVM: LoginViewModel;
    constructor(loginVm: LoginViewModel, dashboard: DashBoardComponent) {
        this.menulist = true;
        this._dashBoard = dashboard;
        this._loginVM = loginVm;
    }
    ngOnInit() {
        this.menulist = true;

    }
}

我正在创建的循环依赖关系在哪里，我无法弄清楚。

请帮我一下。 我在asp.net core 2.0中使用Angular 5

Answer 1

问题与loginVmData: LoginVmData LoginService loginVmData: LoginVmData 。 DI在尝试注入时无法检测到它是什么。 关于这一点，您可以阅读Angular中的依赖注入 。

但

查看您的代码，您只是将这些数据传递到LoginHttpCall服务中。 因此，您可以将其从构造函数中删除，并使该方法接受该数据，类似于registerHttpCall方法。 在方法中传递登录模型，而不是将其注入构造函数中。

constructor(httpClientModule: HttpClient ) {
   this._httpClientModule = httpClientModule;
}

public LoginHttpCall(loginVmData: LoginVmData): Observable<loginVM> {    
   const headers = new HttpHeaders().set('Content-Type', 'application/json; charset=utf-8');    
   return this._httpClientModule.post<loginVM>(this.loginUrl, loginVmData, { headers });
}