Angular 2/4/5中如何以编程方式修改API_URL？

嘿，我完全懂你的需求——既要保留从配置文件预设API根URL的便捷性，又要让用户能在运行时灵活修改它对吧？结合Mike Kovetsky的思路，我们可以通过封装一个专属服务来实现这个功能，下面是一步步的具体实现方案：

1. 定义API_URL注入令牌（保留初始配置能力） #

首先还是按照Mike的方式，先定义一个注入令牌，用来从配置文件读取初始的API URL：

import { InjectionToken } from '@angular/core';

export const API_URL = new InjectionToken<string>('API_URL');

2. 在模块中提供初始预设值 #

在你的AppModule里，把配置文件（比如environment.ts）里的预设值注入到这个令牌中：

import { NgModule } from '@angular/core';
import { API_URL } from './api-url.token';
import { environment } from '../environments/environment';

@NgModule({
  providers: [
    { provide: API_URL, useValue: environment.apiUrl }
  ]
})
export class AppModule { }

3. 核心：创建API URL管理服务 #

这是实现可修改功能的关键——我们用一个单例服务来持有当前的API URL，同时提供读取和修改的方法，还能可选地持久化用户的修改：

import { Injectable, Inject } from '@angular/core';
import { API_URL } from './api-url.token';

@Injectable({ providedIn: 'root' })
export class ApiUrlService {
  private currentApiUrl: string;

  constructor(@Inject(API_URL) initialApiUrl: string) {
    // 初始化时加载配置文件的预设值
    this.currentApiUrl = initialApiUrl;
    // 可选：启动时自动加载用户之前保存的URL
    this.loadSavedApiUrl();
  }

  // 获取当前生效的API URL
  getCurrentApiUrl(): string {
    return this.currentApiUrl;
  }

  // 修改API URL，这里可以添加格式验证逻辑
  updateApiUrl(newUrl: string): void {
    // 简单的URL格式验证，你可以根据需求调整
    const validUrlPattern = /^(https?:\/\/)?([\w.-]+)\.([a-z]{2,})(\/.*)?$/i;
    if (validUrlPattern.test(newUrl)) {
      this.currentApiUrl = newUrl;
      // 可选：把用户设置的URL保存到localStorage，下次打开应用自动生效
      localStorage.setItem('userCustomApiUrl', newUrl);
    } else {
      throw new Error('请输入有效的API URL格式（比如：https://api.example.com）');
    }
  }

  // 从localStorage加载用户之前保存的URL
  private loadSavedApiUrl(): void {
    const savedUrl = localStorage.getItem('userCustomApiUrl');
    if (savedUrl) {
      this.currentApiUrl = savedUrl;
    }
  }
}

4. 在组件中实现用户修改界面 #

比如创建一个设置页面组件，让用户输入新的API URL并保存：

import { Component } from '@angular/core';
import { ApiUrlService } from './api-url.service';

@Component({
  selector: 'app-api-settings',
  template: `
    <div class="api-settings">
      <h3>API 端点设置</h3>
      <div>
        <label>当前API URL：</label>
        <span>{{ currentApiUrl }}</span>
      </div>
      <div>
        <label>输入新的API URL：</label>
        <input [(ngModel)]="newApiUrl" placeholder="例如：https://api.new-example.com">
      </div>
      <button (click)="saveNewApiUrl()">保存修改</button>
      <div *ngIf="errorMessage" class="error">{{ errorMessage }}</div>
    </div>
  `,
  styles: [`
    .api-settings { padding: 20px; }
    .error { color: red; margin-top: 10px; }
  `]
})
export class ApiSettingsComponent {
  currentApiUrl: string;
  newApiUrl: string;
  errorMessage: string = '';

  constructor(private apiUrlService: ApiUrlService) {
    this.currentApiUrl = apiUrlService.getCurrentApiUrl();
    this.newApiUrl = this.currentApiUrl;
  }

  saveNewApiUrl(): void {
    this.errorMessage = '';
    try {
      this.apiUrlService.updateApiUrl(this.newApiUrl);
      this.currentApiUrl = this.apiUrlService.getCurrentApiUrl();
      alert('API URL修改成功！');
    } catch (err) {
      this.errorMessage = err.message;
    }
  }
}

5. 在HTTP服务中使用当前的API URL #

最后，在你所有需要调用API的服务里，通过ApiUrlService获取当前生效的URL：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ApiUrlService } from './api-url.service';

@Injectable({ providedIn: 'root' })
export class UserService {
  constructor(
    private http: HttpClient,
    private apiUrlService: ApiUrlService
  ) {}

  getUsers() {
    // 动态获取当前的API URL
    const apiRoot = this.apiUrlService.getCurrentApiUrl();
    return this.http.get(`${apiRoot}/users`);
  }
}

这样一来，既保留了从配置文件预设API URL的能力，又实现了用户可修改的需求，而且修改后的URL会自动在所有API调用中生效，还能可选地持久化用户的设置，下次打开应用时自动加载。

内容的提问来源于stack exchange，提问作者Rafael Farias