Angular 18：在 APP_INITIALIZER 提供程序之后设置 InjectionToken
74
0
在 angular 18 中，我需要在应用程序初始化后设置 API URL（因为出于显而易见的原因，需要从 json 文件中获取 URL）。但是它没有设置。实际上 InjectionToken 之前已经设置过了
在 angular 18 中，我需要在应用程序初始化后设置 API URL（因为出于显而易见的原因，需要从 json 文件中获取 URL）。但是它没有设置。实际上，它 InjectionToken 之前已经设置过， APP_INITIALIZER 尽管它是后来添加到 providers 数组 app.config.ts
参考： https://angular.dev/api/core/APP_INITIALIZER?tab=usage-notes
以下是 Stackblitz
期望设置 API_URL_TOKEN 为 url 值并将其用于所有 API 调用。存储在 localStorage 中并分配。
private apiUrl = inject(API_URL_TOKEN);
loginUser(data: { username: string; password: string }) {
return this.http.post(`${this.apiUrl}/auth`, data).pipe(
tap((res) => {
if (res.success) {
this.addToken(res.data);
}
})
);
}
这是我尝试过的
主要内容
bootstrapApplication(AppComponent, appConfig)
应用程序.config.ts
export const appConfig: ApplicationConfig = {
providers: [
provideHttpClient(withFetch(), withInterceptors([authInterceptor, errorInterceptor])),
provideAppInitializer(),
provideApiUrl(),
provideRouter(routes),
provideAnimationsAsync(),
provideCharts(withDefaultRegisterables()),
],
};
应用程序初始化器.ts
const CONFIG_URL = '/config.json';
function appInitializer(http: HttpClient, storageService: StorageService) {
return async () => {
try {
const config = await firstValueFrom(http.get<{apiUrl: string}>(CONFIG_URL));
storageService.apiUrl = config.apiUrl;
console.log('Config loaded successfully');
} catch (error) {
console.error('Error loading configuration:', error);
throw error;
}
};
}
export function provideAppInitializer(): Provider {
return {
provide: APP_INITIALIZER,
useFactory: appInitializer,
deps: [HttpClient, StorageService],
multi: true,
};
}
应用程序-url-token.ts
export const API_URL_TOKEN = new InjectionToken<string>('API_URL_TOKEN');
function apiUrlFactory(storageService: StorageService): string {
const apiUrl = storageService.apiUrl;
if (apiUrl) {
return apiUrl;
}
throw new Error('API URL not found in configuration');
}
export function provideApiUrl(): Provider {
return {
provide: API_URL_TOKEN,
useFactory: apiUrlFactory,
deps: [StorageService],
multi: false,
};
}
/* 其他方式 */
export const API_URL_TOKEN = new InjectionToken<string>('API_URL_TOKEN');
export function provideApiUrl(): Provider {
return {
provide: API_URL_TOKEN,
useValue: (storageService: StorageService) => storageService.getApiUrl,
deps: [StorageService],
};
}
存储.服务.ts
import { inject, Injectable, InjectionToken } from '@angular/core';
const LOCAL_STORAGE = new InjectionToken<Storage>('Browser Storage', {
providedIn: 'root',
factory: () => localStorage,
});
const API_URL = 'apiUrl';
@Injectable({
providedIn: 'root',
})
export class StorageService {
private readonly storage = inject<Storage>(LOCAL_STORAGE);
get(key: string) {
return this.storage.getItem(key);
}
set(key: string, value: string): void {
this.storage.setItem(key, value);
}
remove(key: string): void {
return this.storage.removeItem(key);
}
clear() {
return this.storage.clear();
}
get apiUrl(): string | null {
return this.storage.getItem(API_URL) || null;
}
set apiUrl(url: string) {
this.storage.setItem(API_URL, url);
}
}
启动时
刷新时
在第二种情况下，很明显，它在初始化之前
关于 config.json
