如何根据Angular组件@Input值动态修改Provider的useValue

Angular组件元数据中的providers是静态定义的，无法直接在组件生命周期中修改其useValue。要实现根据@Input()属性isPopup动态调整Provider的值，可通过以下两种方案实现：

方案1：初始化时一次性确定值（isPopup仅初始化时设置） #

使用useFactory结合组件实例注入，在Provider初始化时根据当前isPopup值生成对应结果：

import { Component, Input, Inject, InjectionToken, forwardRef } from '@angular/core';

// 定义注入Token
export const OPEN_PROFILE_TRACKING_LOCATION_TOKEN = new InjectionToken<string>('OpenProfileTrackingLocation');

@Component({
  selector: 'app-profile',
  template: `<!-- 组件模板内容 -->`,
  providers: [
    {
      provide: OPEN_PROFILE_TRACKING_LOCATION_TOKEN,
      useFactory: (component: ProfileComponent) => {
        // 根据组件的isPopup属性返回对应值
        return component.isPopup ? 'popup_tracking_location' : 'default_tracking_location';
      },
      // 用forwardRef避免循环引用问题
      deps: [forwardRef(() => ProfileComponent)]
    }
  ]
})
export class ProfileComponent {
  @Input() isPopup = false;

  // 组件内部可直接注入使用该Token的值
  constructor(
    @Inject(OPEN_PROFILE_TRACKING_LOCATION_TOKEN) private trackingLocation: string
  ) {}
}

方案2：支持动态更新（isPopup会在生命周期中变化） #

如果isPopup是动态变化的，需要让Token的值实时同步更新，可通过BehaviorSubject包装值，在ngOnChanges中更新：

import { Component, Input, Inject, InjectionToken, OnInit, OnChanges, SimpleChanges } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

export const OPEN_PROFILE_TRACKING_LOCATION_TOKEN = new InjectionToken<BehaviorSubject<string>>('OpenProfileTrackingLocation');

@Component({
  selector: 'app-profile',
  template: `<!-- 组件模板内容 -->`,
  providers: [
    {
      provide: OPEN_PROFILE_TRACKING_LOCATION_TOKEN,
      useValue: new BehaviorSubject<string>('default_tracking_location')
    }
  ]
})
export class ProfileComponent implements OnInit, OnChanges {
  @Input() isPopup = false;

  constructor(
    @Inject(OPEN_PROFILE_TRACKING_LOCATION_TOKEN) private trackingLocation$: BehaviorSubject<string>
  ) {}

  ngOnInit() {
    this.updateTrackingLocation();
  }

  ngOnChanges(changes: SimpleChanges) {
    // 当isPopup属性变化时更新值
    if (changes['isPopup']) {
      this.updateTrackingLocation();
    }
  }

  private updateTrackingLocation() {
    const targetLocation = this.isPopup ? 'popup_tracking_location' : 'default_tracking_location';
    this.trackingLocation$.next(targetLocation);
  }
}

使用该方案时，依赖此Token的消费者需要订阅BehaviorSubject以获取实时更新的值：

// 消费示例
constructor(
  @Inject(OPEN_PROFILE_TRACKING_LOCATION_TOKEN) trackingLocation$: BehaviorSubject<string>
) {
  trackingLocation$.subscribe(location => {
    // 处理实时更新的location值
  });
}

内容的提问来源于stack exchange，提问作者Eugene Sukh