góc 2 không thể giải quyết tất cả các tham số cho dịch vụ

Question

tôi có hai dịch vụ: loginService và Userservice và cố gắng tiêm Userservice vào Loginservice và ứng dụng sẽ không chạy.

trong giao diện điều khiển, tôi có lỗi:

Error: Can't resolve all parameters for UserService: ([object Object], ?). at SyntaxError.ZoneAwareError (http://localhost:4200/polyfills.bundle.js:7156:33) at SyntaxError.BaseError [as constructor]

đây là loginservice tôi:

import {UserService} from '../services/user.service'; 
@Injectable() 
export class LoginService { 

    constructor(public _http: Http,public us:UserService) { 
    } 

và userService:

@Injectable() 
    export class UserService { 
    constructor(private _http: Http , public _ls: LoginService) { 

    } 

mô-đun góc:

import {LoginService } from './services/login.service'; 
import {UserService} from './services/user.service'; 

@NgModule({ 
    declarations: [ 
    AppComponent, 


    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 

    ], 
    exports: [BrowserModule, SlimLoadingBarModule], 
    providers: [UserService, LoginService , appRoutingProviders ], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

Answer 1

Bạn có tham chiếu vòng tròn.

UserService của bạn yêu cầu LoginService và LoginService yêu cầu UserService.

Xóa một trong các phụ thuộc. Ví dụ. refactor UserService của bạn để nó không yêu cầu tham chiếu đến LoginService

Answer 2

Như người khác đã đăng đề cập đến phụ thuộc vòng tròn ... bạn có thể xem xét sử dụng forwardRef() để giải quyết vấn đề này.

Tóm lại, chúng tôi có thể tiêm Tham chiếu chuyển tiếp thay vì dịch vụ thực. Vì vậy, việc tiêm dịch vụ sẽ được hoãn lại. Do đó phụ thuộc vòng tròn được giải quyết.

Đây là một mẫu mã:

import {Component, Inject, forwardRef} from '@angular/core'; 

@Component({ 
    selector: 'my-app', 
    template: '<h1>Favourite framework: {{ name }}</h1>' 
}) 
class AppComponent { 
    name: string; 

    constructor(@Inject(forwardRef(() => NameService)) nameService) { 
    this.name = nameService.getName(); 
    } 
} 

class NameService { 
    getName() { 
    return "Angular"; 
    } 
} 

Bạn có thể kiểm tra this page để biết thêm chi tiết.