如何在Angular库中动态传递输入数据至API端点？

方案1：用InjectionToken注入API端点配置 #

这种方式允许宿主应用给库传递配置，完全不需要修改库代码，是Angular官方推荐的做法。

1. 在库中定义InjectionToken

// 库内的config.ts文件
import { InjectionToken } from '@angular/core';

// 定义一个注入令牌，用于接收宿主传递的API端点
export const API_ENDPOINT = new InjectionToken<string>('API_ENDPOINT');

2. 库的服务依赖注入该令牌

// 库内的数据服务data.service.ts
import { Injectable, Inject } from '@angular/core';
import { API_ENDPOINT } from './config';
import { HttpClient } from '@angular/common/http';

@Injectable({ providedIn: 'root' })
export class DataService {
  constructor(
    private http: HttpClient,
    @Inject(API_ENDPOINT) private apiEndpoint: string
  ) {}

  // 接收用户输入并传递到API
  submitUserInput(inputData: any) {
    return this.http.post(`${this.apiEndpoint}/submit`, inputData);
  }
}

3. 宿主应用提供端点值
   在宿主的AppModule里，把实际的API端点值注入到令牌中：

// 宿主应用的app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// 导入库中的令牌
import { API_ENDPOINT } from 'your-library-name';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [
    // 传递你的API端点
    { provide: API_ENDPOINT, useValue: 'https://your-production-api.com' }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

方案2：用服务的setter方法动态设置端点 #

如果需要在运行时灵活修改API端点（比如切换开发/生产环境），可以给库的服务加一个setter：

// 库内的data.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({ providedIn: 'root' })
export class DataService {
  private _apiEndpoint: string = '';

  // 暴露setter让宿主设置端点
  set apiEndpoint(endpoint: string) {
    this._apiEndpoint = endpoint;
  }

  constructor(private http: HttpClient) {}

  submitUserInput(inputData: any) {
    if (!this._apiEndpoint) {
      throw new Error('API端点未设置，请先调用apiEndpoint赋值');
    }
    return this.http.post(`${this._apiEndpoint}/submit`, inputData);
  }
}

宿主组件中使用示例：

// 宿主的app.component.ts
import { Component, OnInit } from '@angular/core';
import { DataService } from 'your-library-name';
import { environment } from '../environments/environment';

@Component({
  selector: 'app-root',
  template: `
    <input [(ngModel)]="userInput" placeholder="输入内容">
    <button (click)="submitData()">提交</button>
  `
})
export class AppComponent implements OnInit {
  userInput: string = '';

  constructor(private dataService: DataService) {}

  ngOnInit() {
    // 从环境变量读取端点并设置
    this.dataService.apiEndpoint = environment.apiEndpoint;
  }

  submitData() {
    this.dataService.submitUserInput({ content: this.userInput })
      .subscribe(res => console.log('提交成功:', res));
  }
}

方案3：结合宿主环境变量传递 #

如果宿主应用本身用了Angular的环境配置文件（environment.ts），可以直接把环境里的端点值注入到库的InjectionToken中，和方案1配合使用，更便于环境切换。

环境文件示例：

// environments/environment.ts
export const environment = {
  production: false,
  apiEndpoint: 'https://dev-api.example.com'
};

然后在宿主的AppModule中：

{ provide: API_ENDPOINT, useValue: environment.apiEndpoint }

总结 #

• 如果不需要动态修改端点，优先用InjectionToken方案，符合Angular依赖注入的最佳实践，代码更规范。
• 如果需要在运行时切换端点，选择setter方法，灵活性更高。

内容的提问来源于stack exchange，提问作者Pushpinder Singh