angular6 – 如何在index.html中为Angular 6使用环境变量

我正在使用angular6,在我的项目中我使用Facebook Account Toolkit进行移动验证.

我需要使用以下代码在index.html文件中初始化Account toolkit.

AccountKit.init({
   appId:"XX",state:"xx",version:"v1.2",fbAppEventsEnabled:true,debug:true
 });

问题是,appId和状态的值根据环境(开发/测试/生产)而变化.

如何在index.html文件中使用环境变量.

如果有人有角度6的解决方案,请告诉我.

提前致谢.

解决方法

将您的环境文件导入.ts文件.

import { environment } from '../../environments/environment';

在类中创建必需的字段,在构造函数中将环境中的值分配给这些变量,在.html文件中使用通常的绑定.

.TS

import { Component } from '@angular/core';
import { environment } from '../environments/environment';

@Component({
  selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
export class AppComponent {
  public production = true;
  constructor() {
    this.production = environment.production;
  }
}

html的

<span>{{production}}</span>