角2 - 如何将参数传递到抽象服务

Question

角2 - 如何将参数传递到抽象服务，当我在模块提供服务

文件抽象服务

@Injectable() 
export class Service<T>{ 
    private headers: RequestOptions = headersRequest.options; 
    private readonly baseUrl: string; 

    constructor(private http: Http, baseUrl: string) { 
     this.baseUrl = baseUrl; 
    } 

    public getAll(): Promise<T[]> { 
     return this.http.get(`${this.baseUrl}`) 
      .toPromise() 
      .then(this.extractData) 
      .catch(this.handleError); 
    } 

    public get(id: number): Promise<T> { 
     return this.http.get(`${this.baseUrl}`) 
      .toPromise() 
      .then(this.extractData) 
      .catch(this.handleError); 
    } 

    private extractData(res: Response) { 
     let body = res.json(); 
     return body || {}; 
    } 

    private handleError(error: Response | any) { 
     let errMsg: string; 
     if (error instanceof Response) { 
      const body = error.json() || ''; 
      const err = body.error || JSON.stringify(body); 
      errMsg = `${error.status} - ${error.statusText || ''} ${err}`; 
     } else { 
      errMsg = error.message ? error.message : error.toString(); 
     } 
     console.error(errMsg); 
     return Promise.reject(errMsg); 
    } 
} 

文件与模块时，我提供服务

@NgModule({ 
    imports: [ 
     SharedModule, 
     RouterModule.forChild(routes) 
    ], 
    declarations: [ 
     HeaderTennisComponent, 
     TennisComponent, 
     ProgramsComponent, 
     ProgramComponent, 
     PlotsComponent, 
     GuidesComponent, 
     CategoriesComponent, 
     ChampionsComponent 
    ], 
    providers: [Service] 
}) 

使用服务时带组件的文件。

export class ProgramComponent implements OnInit { 
    private program: IProgram; 
    constructor(private route: ActivatedRoute, private tennisService: Service<IProgram>) { 
     // 
    } 

    public ngOnInit() { 
     this.getProgram(+this.route.snapshot.params['id']); 
    } 

    private getProgram(id: number) { 
     this.tennisService.get(id).then(
      (program) => this.program = program 
     ); 
    } 
} 

我需要在提供服务时传递baseUrl。

Answer 1

角度DI没有直接支持仿制药。

有几种方法可以解决，根据您的要求：

providers: [ 
    {provide: 'baseUrl': useValue: 'http://example.com'}, 
    {provide: Service, useFactory: (http, baseUrl) new Service<IProgram>(http, baseUrl), deps: [Http, new Inject('baseUrl') }, 
    {provide: 'ServiceIProgram', useFactory: (http, baseUrl) new Service<IProgram>(http, baseUrl), deps: [Http, new Inject('baseUrl') }, 
    {provide: 'Service', useFactory: (http, baseUrl) => (T) => new Service<T>(http, baseUrl), deps: [Http, new Inject('baseUrl')] 
] 

@Injectable() 
export class Service<T>{ 

    ... 

    constructor(private http: Http, @Inject('baseUrl') baseUrl: string) { 
     this.baseUrl = baseUrl; 
    } 

export class ProgramComponent implements OnInit { 
    ... 
    constructor(private route: ActivatedRoute, 
     @Inject(Service) private tennisService: Service<IProgram>, // fixed type parameter 
     @Inject('ServiceIProgram') private tennisService: Service<IProgram>, 

     @Inject('Service') serviceFactory:any // factory to instantiate yourself 
    ) { 
     // not sure if passing generic type parameters this way is supported by TypeScript 
     this.tennisService = serviceFactory(IProgram); 
    }