Question

我尝试使用来自异步休息调用的值在“CoreModule”中设置APP_BASE_HREF。我看不出这是怎么做的，因为提供方法需要返回一个字符串。

例如：

@NgModule({
    imports: [
        ...
        HttpModule
    ],
    ...
    providers: [
        ...
        ...
        BackendRequestClass,
        { provide: APP_BASE_HREF, useFactory: () => () => return '/some/path', deps: [], multi: true }
    ],
});

但是当我需要来自webservice的值时，我无法返回字符串。有什么想法可以做到吗？

THX

Answer 1

我尝试了你的解决方案。问题是，当时

{ provide: APP_BASE_HREF, useFactory: (config) => config.appBaseHref, deps: [ConfigService] }

尚未设置config.appBaseHref。当我调试代码时，我看到APP_INITIALIZER是在APP_BASE_HREF提供商之后执行的

这导致BASE_HREF未设置。

Answer 2

您可以使用APP_INITIALIZER提前获取路径，然后使用Angularjs2 - preload server configuration before the application starts

中所示的依赖关系

export function loadConfig(config: ConfigService) => () => config.load()

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule,
        routes,
        FormsModule,
        HttpModule],
    providers: [
        ConfigService,
        BackendRequestClass,
        { provide: APP_INITIALIZER,
          useFactory: loadConfig,
          deps: [ConfigService], 
          multi: true },
        { provide: APP_BASE_HREF, useFactory: (config) => config.appBaseHref, deps: [ConfigService] }

    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

ConfigService可以注入BackendRequestClass或Http并获取数据，然后使用其appBaseHref属性使其可用（仅举例说明如何完成）。

Answer 3

我们面临着同样的挑战：根据异步API调用的结果动态设置APP_BASE_HREF，以允许路由可通过不同URL访问的应用。

尽管Günter提出的solution看起来很甜蜜，但不幸的是，它至少在Angular 7上不起作用。在我们的情况下，APP_BASE_HREF始终优先于APP_INITIALIZER，因此我们不能不会根据从初始值设定项返回的已解决的承诺值来初始化APP_BASE_HREF。

相反，我实现了在Angular引导之前进行API调用，然后注入提供程序，以便在Angular上下文中可用。

添加到main.ts：

fetchConfig().then(config => {
  platformBrowserDynamic([ { provide: ConfigData, useValue: config } ])
    .bootstrapModule(AppModule)
    .catch(err => console.log(err));
});

然后我们可以在APP_BASE_HREF内的providers中配置app.module.ts：

providers: [
  // …
  { 
    provide: APP_BASE_HREF, 
    useFactory: (config: ConfigData) => config.base, 
    deps: [ ConfigData ] 
  }
]

Angular 2使用Promise / Observable中的值设置APP_BASE_HREF

3 个答案: