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 等。