Angular 15 - 考慮使用 @Inject 裝飾器指定注入令牌

Question

使用 Angular 的工廠提供程序並在 factory.service.ts 中發送兩個參數后，我想顯示“工廠”和一個布爾值。

它似乎在其他角度版本中工作正常，但在角度 15 版本中出現問題。

不知道哪個部分有問題。。。。

主頁.component.ts

import { Component, Inject, OnInit } from '@angular/core';
import { FactoryService } from '../factory.service';
import { LogService } from '../log.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
  providers: [LogService, 
   {provide: 'another', useClass: LogService}, 
   {provide: 'same',useExisting: LogService}, 
   {provide: 'githubUrl',useValue: 'https://github.com/abcd'}, 
   {provide: 'factory',useFactory: (logService) => {
              return new FactoryService(logService, true);},
              deps: [FactoryService]
   }]
})

export class HomeComponent implements OnInit{

    constructor(private log:LogService, 
        @Inject('another') private another, 
        @Inject('same') private same,
        @Inject('githubUrl') private url,
        @Inject('factory') private factory         
        ) {
        console.log("this.log === this.another", this.log === this.another)
        console.log("this.log === this.same", this.log === this.same)
        console.log(this.url)
    }

    ngOnInit(): void {
        this.log.info('logservice');
        this.factory.log();
    }

}

工廠.服務.ts

import { Inject, Injectable } from "@angular/core";
import { LogService } from "./log.service";

@Injectable()
export class FactoryService {
    constructor(private logService: LogService, private isFactory: boolean) {}

    public log() {
        this.logService.info(`factory ${this.isFactory}`);
    }
}

錯誤

Error: src/app/factory.service.ts:6:57 - error NG2003: No suitable injection token for parameter 'isFactory' of class 'FactoryService'.
  Consider using the @Inject decorator to specify an injection token.

6     constructor(private logService: LogService, private isFactory: boolean) {}
                                                          ~~~~~~~~~

  src/app/factory.service.ts:6:68
    6     constructor(private logService: LogService, private isFactory: boolean) {}
                                                                         ~~~~~~~
    This type is not supported as injection token.

看了官方文檔，不知道是什么問題。

Answer 1

根據建議的錯誤消息，您應該為自定義參數使用@Inject裝飾器，否則 Angular 會將其視為依賴項並嘗試解決它。

由於您沒有這樣isFactory提供程序，因此 Angular 拋出了錯誤。

添加名為isFactory的 @Inject 裝飾器

工廠.服務.ts

......
    constructor(private logService: LogService, @Inject('isFactory') private isFactory: boolean) {}
......

提供isFactory值並刪除new FactoryService中的第二個參數

主頁.component.ts

......
  providers: [LogService, 
   {provide: 'another', useClass: LogService}, 
   {provide: 'same',useExisting: LogService}, 
   {provide: 'githubUrl',useValue: 'https://github.com/abcd'}, 
   {
      provide: 'isFactory',
      useValue: true,
   },
   {provide: 'factory',useFactory: (logService) => {
              return new FactoryService(logService);},
              deps: [FactoryService]
   },
]
})

代碼未經測試。

有關詳細信息，請參閱https://www.positronx.io/how-to-pass-parameters-to-angular-service-using-inject/ 。

Answer 2

最簡單的解決方法是使用注入令牌。 如果你使用factory ，那么這些是可搖樹的。

const IS_FACTORY = new InjectionToken<boolean>('Is factory', {
  providedIn: 'root', // optional
  factory: () => true
});

提供，

providers: [{ provide: IS_FACTORY, useValue: false}],

如果你想在你的組件中使用類型安全

const isFactory = inject(IS_FACTORY); // or the @Inject method

inject的第二個參數允許使用常用的解析修飾符 optional、self、host 等。