[英]Can't resolve all parameters for LoginService: Angular 5
我是新手。 嘗試解決此問題,因為無法解決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
問題與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 });
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.