Angular 9-如何将动态参数注入到服务构造函数中

Question

我需要向以下形式的后端url发出请求：

localhost:8000/myapp/item1/:id1/item2/:id2/item3

其中id1和id2是动态数。我曾考虑过使用一个在构造函数中接受2个参数的服务，比如这个

export class Item3Service {
private id1: number;
private id2: number;
constructor(
id1: number,
id2: number
) {
this.id1 = id1;
this.id2 = id2;
}
getList() {/**** implementation here ****/}
getDetail(id3: number) {/**** implementation here ****/}
create() {/**** implementation here ****/}
update(id3: number) {/**** implementation here ****/}
delete(id3: number) {/**** implementation here ****/}
}

我真的不知道如何将参数注入构造函数。我还需要在解析器中使用此服务，以及如何在解析器中向其传递参数？在这种情况下，创建注入令牌听起来毫无用处，因为令牌值每次都应该更改。我没什么想法了

Answer 1

您的服务最好是无状态的，这将降低应用程序的复杂性，并为您省去一些问题和调试，在您的情况下这是不必要的，因为您总是可以从激活的路由中获得item1Id和

item2Id以下是我对您的服务的设想(请记住，这只是一个需要考虑的例子，因为我不知道您的确切语义和用例(

项目服务

export class ItemService {
constructor(private http: HttpClient) {}
getList(item1Id: string, item2Id: string) {
/* Call to Get List endpoint with Item1Id and Item2Id */
}
getDetails(item1: string, item2: string, item3: string) {
/* Call to Get Details endpoint with Item1Id and Item2Id and Item3Id */
}
}

然后，只要您可以访问ActivatedRouteSnapshot或ActivatedRoute，您就可以在任何地方使用此服务

路由item1/：item1Id/item2/：item2Id的解析程序示例

export class ItemResolver implements Resolve<any> {
constructor(private itemService: ItemService) {}
resolve(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable<any> {
return this.itemService.getList(route.params['item1Id'], route.params['item2Id']);
}
}

示例在组件中用于路由项目1/：项目1Id/item2/：项目2Id以获取项目3的详细信息

export class HelloComponent  {
constructor(private route: ActivatedRoute, private itemService: ItemService) {}
getDetails(item3Id) {
this.route.params.pipe(
take(1),
map(({ item1Id, item2Id }) => {
console.log(this.itemService.getDetails(item1Id, item2Id, item3Id))
})
).subscribe();
}
}

这是一个正在工作的StackBlitz演示：https://stackblitz.com/edit/angular-ivy-h4nszy

您应该很少使用有状态服务(除非真的有必要，即使在这种情况下，我也建议使用ngrx库之类的东西来管理您的状态(。不过，您确实不需要将参数传递给服务的构造函数，您应该保持它无状态，并将参数传递到方法。

Answer 2

我不知道从哪里获得动态id，但实际上可以将它们放在providers数组中，并像使用注入令牌一样使用依赖注入。如果有可能为ID创建一个工厂方法，当然是

服务

export class Item3Service {
constructor(
@inject(LOCALE_ID) private locale: string) {}
}

app.moudle.ts

@NgModule({
providers: [
{ provide: LOCALE_ID, useFactory: () => window.navigator.language}
]
})

---

编辑

既然ID是你路线的一部分，我会像这个一样做

组件

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { MyServiceService } from '../my-service.service';
@Component({
selector: 'app-routed',
templateUrl: './routed.component.html',
styleUrls: ['./routed.component.scss']
})
export class RoutedComponent implements OnInit {
constructor(private route: Router, private myService: MyServiceService) { }
ngOnInit(): void {
this.myService.setUrl(this.route.url)
}
}

服务

import { Injectable } from '@angular/core';
import { ReplaySubject, Observable } from 'rxjs';
import { share, switchMap } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class MyServiceService {
private _url$: ReplaySubject<string> = new ReplaySubject<string>(1);
private _mydata$: Observable<string>;
get myData$() { return this._mydata$.pipe(share()); }

constructor() {
this._mydata$ = this._url$.pipe(
switchMap(url => {
const parsedUrl = this.parseUrl(url);
return this.callBackend(parsedUrl)
})
)
}
setUrl(url: string) {
this._url$.next(url);
}
private callBackend(parsedUrl): Observable<string> {
// call backend 
}
private parseUrl(url: string): number[] {
// parse ids
}
}