基于组件@Input属性的构造函数中的Angular Service注入参数答案

【问题标题】：Angular Service inject parameter in constructor based on component @Input property基于组件@Input属性的构造函数中的Angular Service注入参数
【发布时间】：2022-08-19 00:15:47
【问题描述】：

我在构造函数中有一个带有参数的服务，这里是一个简单的字符串，稍后在 url 或其他对象上。该参数是为服务的内部行为设置的，这里只是实例化不同的值。


  constructor(@Inject(AUTHOR_TYPE) public authType: string ) { 

    console.log(\'Auth type is \' + authType);
    
    if(authType == \'international\')
      this.authors = [\"a1\",\"a2\",\"a2\",\"a3\"];
    else
      this.authors = [\"local1\",\"local2\",\"local2\",\"local3\"];
  }

该服务在组件内部使用。这个组件有一个输入参数，使组件灵活和可重用。

export class AuthorsComponent implements OnInit {

  @Input(\'type\')
  type: \'local\' | \'international\' = \"local\";
  authors: string[];
  
  constructor(service: AuthorsService) {
    this.authors = service.getAuthors();
   }

  ngOnInit(): void {

    console.log(\'component init as \' + this.type);
  }
}

我希望有一个组件能够使用输入参数（或其他绑定模式）在不同类型之间切换，并且基于组件类型能够设置内部服务以改变行为。

在下面的实时示例中，我只有一个带有自定义参数的组件作者，并且在服务内部检索作者列表，有没有办法实现这一点？

Live example

[更新]

在服务上使用 @Inject 并实际使用 2 个组件和 2 个预定义的 InjectionTocken 的可能解决方案。似乎仍然不是最佳解决方案，因为我有一个通用组件或多或少是空的，只是摸索并显示子组件+ 2个指定组件。达到了范围，但我生成了太多组件。仍然对其他解决方案持开放态度。谢谢

possible solution

标签： angular angular-services angular-injector

【解决方案1】：

您是否需要使用构造函数和自定义注入令牌？

我使用 ngOnInit 以及 getter 和 setter 让它在这里工作 https://stackblitz.com/edit/angular-ivy-9a7tfx?file=src/app/authors.service.ts

【讨论】：

感谢您的建议，但这并不是我真正想要实现的目标。最后，我真的只想拥有一个像<app-authors [type]="international"></app-authors> 或<app-authors [type]="local"></app-authors> 这样的组件。我知道还有其他选择可以做到这一点，但我想了解是否有针对这种特定情况的可能解决方案
是的，我正在玩更多的使注入令牌工厂更具活力的游戏 - 让我继续玩它
link我只是在服务中编辑带有令牌注入的新版本，其中还有其他自动注入，如 HttpClient，因为这是我在这种情况下的第二个问题@Kevin
刚刚用一个简单干净的可能解决方案更新了答案

【解决方案2】：

如果有人对一种可能的解决方案感兴趣，我想出了一个很好且简单的解决方案：

公开一个枚举类型的输入属性 [mode] 的 selector.component

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-selector',
  template: `<div > {{ mode }}</div>`,
  styleUrls: ['./selector.component.scss']
})
export class SelectorComponent implements OnInit {

  @Input('mode') mode : ModeEn = ModeEn.first;

  constructor() { }

  ngOnInit(): void {
  }

}

export enum ModeEn{
  first = 'first',
  second = 'second'
}

只需导入枚举并为其分配新属性即可轻松地从其他组件中使用

import { ModeEn } from './selector/selector.component';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
  <app-selector [mode]="mode.first"></app-selector>
  <app-selector [mode]="mode.second"></app-selector>`,
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  mode = ModeEn;
}

通过这种方式，应用程序选择器组件公开了所有可能的模式，并且在哪里使用导入将简化并将可能的模式限制为仅可用的模式。

【讨论】：