angular - การส่งพารามิเตอร์ไปยังตัวสร้างของบริการ?

ฉันกำลังพยายามสร้างอินสแตนซ์ของบริการในคอมโพเนนต์ ฉันได้รับข้อผิดพลาดนี้

ข้อผิดพลาดที่ไม่ได้จับ: ไม่สามารถแก้ไขพารามิเตอร์ทั้งหมดสำหรับ AuthenticationService: (?, [object Object], ?).

นี่คือบริการของฉัน

     @Injectable()
    export class AuthenticationService {

      protected basePath = 'http://localhost:8080/rest';
      public defaultHeaders: Headers = new Headers();
      public configuration: Configuration = new Configuration();

      constructor(protected http: Http, @Optional() @Inject(BASE_PATH) basePath: string, @Optional() configuration: Configuration) {
        if (basePath) {
          this.basePath = basePath;
        }
        if (configuration) {
          this.configuration = configuration;
          this.basePath = basePath || configuration.basePath || this.basePath;
        }
      }

    public login(authenticationkey?: string, body?: AuthenticationRequestHolder, extraHttpRequestParams?: any): Observable<AuthenticationBundle> {
        return this.loginWithHttpInfo(authenticationkey, body, extraHttpRequestParams)
          .map((response: Response) => {
            if (response.status === 204) {
              return undefined;
            } else {
              return FlexiCoreDecycl`enter code here`e.retrocycle(response.json()) || {};
            }
          });
      }

// More Code

และนี่คือส่วนประกอบที่ใช้บริการ

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  constructor(private _authenticationService: AuthenticationService) {
  }

  ngOnInit() {
    this._authenticationService
      .login('', {mail: '[email ', password: 'admin'})
      .subscribe(response => {
        console.log(response);
      },
        error => {
        console.log(error);
        });
  }
}

และนี่คือโมดูลแองกูลาร์

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [AuthenticationService],
  bootstrap: [AppComponent]
})
export class AppModule { }

มีใครช่วยฉันได้ไหมเกี่ยวกับวิธีการต่อสายพวกนี้อย่างถูกต้อง? ฉันเป็นมือใหม่ทั้งกับ Angular และ TypeScript ดังนั้นฉันจะขอบคุณถ้ามีคำอธิบายและแนวทางเล็กน้อย

คำตอบ #1

อาจจะมีวิธีอื่น แต่ต่อไปนี้คือวิธีที่ฉันแก้ปัญหา ใช้ FactoryBuilder นี่คือสิ่งที่ app.module ของฉันดูเหมือน

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';

import {AppComponent} from './app.component';
import {LoginComponent} from './login/login.component';
import {AuthenticationService, BASE_PATH, Configuration} from '@hanoch/fc_client';
import {Http, HttpModule} from '@angular/http';
import {FormsModule} from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule,
    HttpModule,
    FormsModule
  ],
  providers: [
    Configuration,
    {
      provide: AuthenticationService,
      useFactory: AuthenticationServiceFactory,
      deps: [Http]
    }
  ],
  bootstrap: [AppComponent]
})

export class AppModule {
}

export function AuthenticationServiceFactory(http: Http) {
  return new AuthenticationService(http, 'http://localhost:8080/rest', Configuration);
}

คำตอบ #2

1. คุณจำเป็นต้องเพิ่ม HttpModule ใน imports ของคุณใน AppModule เพราะคลาส Http เป็นบริการของ Angular ที่ถูกกำหนดใน HttpModule

   imports: [
      BrowserModule,
      HttpModule
   ],
   

2. ถ้าคุณต้องการฉีด basePath และ configuration คุณควรเพิ่มพวกมันไปยัง providers:

   providers: [
       {
           provide: BASE_PATH,
           useValue: 'https://google.com' // replace with yours
       }, 
       {
           provide: Configuration,
           useValue: new Configuration() // replace with correct instance
       }
       AuthenticationService
   ]
   

คุณสามารถอ่านเกี่ยวกับการฉีดพึ่งพามากมายในบทเรียน Angular: Angular: การฉีดพึ่งพา