Angular 9 - 如何將動態參數注入服務構造函數

Question

我需要以這種形式向后端 url 提出請求：

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

其中id1和id2是動態數字。 我曾想過在構造函數中使用一個需要 2 arguments 的服務，就像這樣

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

我不知道您從哪里獲得動態 id，但實際上您可以將它們放在提供程序數組中並像使用注入令牌一樣使用依賴注入。 如果可以為id當然創建工廠方法

服務

export class Item3Service {

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

}

應用程序模塊.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 ，所以讓激活的路由保存您的應用程序的 state（在這種情況下，state 是選擇的 Item1Id 和 Item2Id）並創建一個無狀態服務，您可以從任何地方調用該服務並保存您的 Item ZDB974238714CA8DE634A7CE14F 的邏輯

以下是我對您的服務的設想（請記住，這只是一個需要考慮的示例，因為我不完全了解您的語義和用例）

物品服務

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庫來管理您的狀態）與您提供的信息，但您確實不需要將參數傳遞給構造函數在您的服務中，您應該保持它無狀態並將參數傳遞給您的方法。