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 ****/}

}

我真的不知道如何将注入参数到构造函数中。我还需要在 resolver 中使用此服务，而且如何在解析器中将参数传递给它？在这种情况下创建注入令牌听起来毫无用处，因为令牌值每次都应该改变。我运行没有想法

Answer 1

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

服务

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
  }
}

Answer 2

你的服务最好是无状态的，它会降低你的应用程序的复杂性，并为你省去一些问题和调试，只是在你的情况下没有必要，因为你总是可以获得 item1Id 和 item2Id 从你激活的路由，所以让激活的路由保持你的应用程序的状态（在这种情况下，状态是 Item1Id 和 Item2Id 被选中）并创建一个无状态的您可以从任何地方调用并包含项目逻辑的服务 API.

这是我对您的服务的设想（请记住，这只是一个需要考虑的示例，因为我不完全了解您的语义和用例）

ItemService

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']);
  }
}

在路由 item1/:item1Id/item2/:item2Id 的组件中用于获取项目 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 库来管理你的状态）和你提供的信息不过，您确实不需要将参数传递给服务的构造函数，您应该保持无状态并将参数传递给您的方法。

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

Angular 9 - how to inject dynamic parameters into a service constructor

angular-services

angular

angular-dependency-injection

angular-token

angular9

服务

app.moudle.ts

组件

服务