首页 新闻 会员 周边 捐助

angular 中如何在启动时调用 service 中的方法初始化数据

0
悬赏园豆:30 [已解决问题] 浏览: 37次 解决于 2025-01-13 22:36

这是园子博客后台从 angular 15 升级至 angular 19 后遇到的问题

升级之前是在 app.module.ts 中的 AppModule 构造函数中进行初始化的

export class AppModule {
    constructor(preferenceSvc: PreferenceService, _: ServiceWorkerUpdateSubscriber) {
        preferenceSvc.sync().then(() => void 0);
    }
}

但升级后迁移到了 standalone component,用的是 standalone bootstrapping api,没有 app.module.ts,只有 app.config.ts,请问在哪里进行这个初始化操作?

dudu的主页 dudu | 高人七级 | 园豆:27977
提问于:2025-01-12 20:04
< > 人人可用的开源BI工具
分享
最佳答案
0

通过 angular 19 新引入的 provideAppInitializer 解决了

export const appConfig: ApplicationConfig = {
    providers: [
        provideAppInitializer(() => {
            inject(PreferenceService).sync().then(() => void 0);
        })
    ]
};
dudu | 高人七级 |园豆:27977 | 2025-01-13 22:35
其他回答(1)
0

在 Angular 15 升级到 Angular 19 后,您可能会遇到一些变化,尤其是在使用独立组件 (standalone component) 和新的引导 (bootstrapping) API 时。由于不再使用 AppModule,您可以在新的架构中通过不同的方式来进行初始化。

使用 Standalone Component

如果您已经将应用程序转换为使用 standalone components,您可以在独立组件的构造函数中或对应的 ngOnInit 生命周期钩子中进行初始化操作。以下是怎么做的示例。

示例代码

  1. 创建一个 Standalone Component
import { Component, inject, OnInit } from '@angular/core';
import { PreferenceService } from './preference.service'; // 请根据实际路径调整
import { ServiceWorkerUpdateSubscriber } from './service-worker-update-subscriber.service'; // 根据实际路径调整

@Component({
  selector: 'app-root',
  standalone: true,
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  constructor(private preferenceSvc: PreferenceService) {}

  ngOnInit(): void {
    // 在组件初始化的时候同步博客选项数据
    this.preferenceSvc.sync().then(() => {
      // 这里可以做其他初始化操作
    });
  }
}
  1. 使用 Bootstrap API 启动应用程序

确保在入口文件(通常是 main.ts)中使用 bootstrapApplication 函数来引导您的应用程序。例如:

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component'; // 根据实际路径调整

bootstrapApplication(AppComponent).catch(err => console.error(err));

使用 app.config.ts

如果您仍然需要在新的结构中进行一些配置,您可以使用 app.config.ts 进行初始化和设置,例如注册服务工作者,或是定义全局的 providers。这个文件通常是定义根组件和全局配置的地方,但不负责状态初始化。

总结

  • standalone component 中,将初始化逻辑移到组件的构造函数或 ngOnInit 钩子中。
  • 使用 bootstrapApplication API 来启动应用。

通过这种方式,您可以实现与先前类似的初始化逻辑,而不需要再依赖 AppModule。如果有其他具体疑问或问题,请随时告诉我!

收获园豆:30
Technologyforgood | 园豆:7872 (大侠五级) | 2025-01-13 14:26
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册
Top