如何在ngx-agora的angular模块中动态设置AppID键

Question

我在 angular 8 中使用 https://www.npmjs.com/package/ngx-agora 进行视频通话。根据文档，我需要提供如下静态 APPID

const agoraConfig: AgoraConfig = {
  AppID: '1239021930912039-02193',
};

 imports: [
    BrowserModule,
    NgxAgoraModule.forRoot(agoraConfig)
  ],

但我想根据环境从 API 响应中设置 AppId 值。如何使用 APP_INITIALIZER of angular 设置它？或者我可以通过其他方式设置它吗？

Answer 1

您可以像这样使用 APP_INITIALIZER 实现此目的：

创建一个服务以从 API 检索配置，我们称它为 AppConfigService:

@Injectable()
export class AppConfigService {
  private appConfig;

  constructor(private http: HttpClient) { }

  loadAppConfig() {
    return this.http.get('http://url-to-config-from-environment.ts')
      .toPromise()
      .then(data => {
        this.appConfig = data;
      });
  }

  getConfig() {
    return this.appConfig;
  }
}

^ 在此服务中，您需要实施实际代码以根据环境检索配置。 Here's is an example 个。

在 AppModule 中注入服务：

@NgModule({
  ...
  providers: [
    AppConfigService,
    {
      provide: APP_INITIALIZER,
      useFactory: appInitializerFn,
      multi: true,
      deps: [AppConfigService]
    }
  ],
  ...
})
export class AppModule { }

在AppModule中实现appInitializerFn工厂函数：

...
const appInitializerFn = (appConfig: AppConfigService) => {
  return () => {
    return appConfig.loadAppConfig();
  };
};

@NgModule({

您可以refer to this article了解更多详情。

Answer 2

当使用 AOT 时，提供者的解决方案不起作用，因为 NgxAgoraModule 在 forRoot 中使用 'useValue'。

但是您可以在后面的过程中像这样设置APPID：

export const agoraConfig: AgoraConfig = {
   AppID: null //setting null here
};

@NgModule({
...
imports: [
    ...
    NgxAgoraModule.forRoot(agoraConfig),
    ....
],
...
})
export class AppModule { }

然后在您创建 agora 客户端（您的组件）的地方

// false at the end disabled auto initializing
this.client = this.ngxAgoraService.createClient({mode: 'rtc', codec: 'h264'}, false);
this.client.init('your-agora-APPID');

如何在ngx-agora的angular模块中动态设置AppID键

How to dynamically set AppID key in angular module in ngx-agora

video-streaming

webrtc

angular

agora.io