如何在Angular 5中使用APP_INITIALIZER正确加载对象到缓存？

嘿，我瞅你遇到了Angular启动时通过APP_INITIALIZER加载对象，但这些对象没被正确缓存的问题，先看看你的代码细节，再一步步搞定它～

首先先把你给出的代码规整一下，方便排查：

你的NgModule相关代码 #

export function setupApp(setup: AppLoadService ) { 
  return () => setup.initliaze(); // 这里有个拼写错误！是initialize不是initliaze
} 

@NgModule({ 
  imports: [ /* 你的导入模块 */ ],
  providers: [ 
    AppLoadService , 
    { 
      provide: APP_INITIALIZER, 
      useFactory: setupApp, 
      deps: [AppLoadService ], 
      multi: true 
    },
    // 其他提供者
  ]
})

你的AppLoadService代码 #

@Injectable() 
export class AppLoadService { 
  private url = '你的API地址';
  public countries: Country[] = [];

  // 推测你的初始化方法大概是这样
  initialize(): Promise<any> {
    return this.http.get<Country[]>(this.url)
      .pipe(
        tap(countries => this.countries = countries)
      )
      .toPromise();
  }
}

问题排查与解决方案 #

1. 先修正最明显的拼写错误

你在工厂函数里调用的initliaze()是拼写错误，正确的方法名应该是initialize()——这个小错误可能直接导致初始化方法没被执行，自然不会有数据存入缓存。

2. 确保服务是全局单例

如果你的AppLoadService在多个模块的providers里都声明了，会生成多个服务实例，数据就没法在应用内共享。最好改成根注入的方式，确保全局只有一个实例：

// 替换原来的@Injectable()
@Injectable({ providedIn: 'root' }) 
export class AppLoadService { 
  // ... 其余代码不变
}

改成这样后，就不用在NgModule的providers里重复声明AppLoadService了，避免多实例问题。

3. 添加加载状态标记，避免重复请求+确保数据缓存

如果你的初始化是调用HTTP接口加载数据，建议加个状态标记，确保数据只加载一次，不会每次启动都重复请求，同时保证数据存在服务实例里：

@Injectable({ providedIn: 'root' })
export class AppLoadService { 
  private url = '你的API地址';
  public countries: Country[] = [];
  private isLoaded = false; // 标记数据是否已经加载完成

  constructor(private http: HttpClient) {} // 别忘了注入HttpClient

  initialize(): Promise<any> {
    // 如果已经加载过数据，直接返回已完成的Promise，避免重复请求
    if (this.isLoaded) {
      return Promise.resolve();
    }

    return this.http.get<Country[]>(this.url)
      .pipe(
        tap(countries => {
          this.countries = countries;
          this.isLoaded = true; // 标记数据已加载完成
        })
      )
      .toPromise()
      .catch(error => {
        console.error('加载国家数据失败:', error);
        return Promise.reject(error); // 可选：让APP_INITIALIZER感知加载失败
      });
  }
}

4. 确保APP_INITIALIZER配置正确+依赖齐全

别忘了在NgModule里导入HttpClientModule，否则HTTP请求会失败；同时修正工厂函数的拼写错误：

export function setupApp(setup: AppLoadService ) { 
  return () => setup.initialize(); // 修正拼写
} 

@NgModule({ 
  imports: [ HttpClientModule ], // 必须导入，否则http请求无法执行
  providers: [ 
    { 
      provide: APP_INITIALIZER, 
      useFactory: setupApp, 
      deps: [AppLoadService ], 
      multi: true 
    },
    // 其他提供者
  ]
})
export class AppModule {}

5. 验证缓存是否生效

在任意组件里注入AppLoadService，直接访问countries属性就能拿到缓存的数据了：

@Component({ /* 组件配置 */ })
export class TestComponent {
  constructor(private appLoadService: AppLoadService) {}

  ngOnInit() {
    console.log('缓存的国家数据:', this.appLoadService.countries);
  }
}

总结一下 #

先修正方法名的拼写错误，然后确保服务是全局单例，再通过状态标记避免重复请求，最后验证数据是否能在组件中正常访问——这样就能保证启动时加载的对象被正确缓存，在整个应用生命周期里都能使用啦～

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