将服务结构参数转换为角度应用程序

时间:2017-12-14 18:05:01

标签: angular azure azure-service-fabric

我正在寻找一种方法来将服务结构中的参数读入我的angular 2应用程序。例如,我希望能够根据service fabric参数config xml文件中的值设置api端点和环境名称(以显示我们所处的环境)。我还没有找到解决这个问题的简单而优雅的解决方案。

我目前的解决方法是使用Asp.Net控制器来提供静态角度,以便将角度配置中的值设置为ViewBag对象。

public IActionResult Index()
    {
        var apiUrl = _configurationPackage.Settings.Sections["Spa_Configuration"].Parameters["apiUrl"].Value;
        var environmentName = _configurationPackage.Settings.Sections["Spa_Configuration"].Parameters["environmentName"].Value;

        ViewBag.apiUrl = apiUrl;
        ViewBag.environmentName = environmentName;

        return View();
    }

然后我通过在Index.cshtml中调用window.onload上的javascript函数将这些值添加到会话存储中。

<script>
  function codeAddress() {

    var environmentName = '@ViewBag.environmentName';
    var myJsVariable = '@ViewBag.apiUrl';

    console.log(environmentName);

    sessionStorage.setItem('apiUrl', myJsVariable);
    sessionStorage.setItem('environmentName', environmentName);

    console.log(sessionStorage);
  }

  window.onload = codeAddress;
</script>

然后我在角度控制器中使用这些变量,如下所示:

@Injectable()
export class HttpService {

  constructor(private _httpClient: HttpClient, private _http: Http) { }

  private baseUrl = sessionStorage.getItem('apiUrl');

这种方法似乎达到了一定程度。问题是当app加载environmentName和apiUrl时似乎没有正确设置。只有当我点击刷新时,这些似乎才会被设置并且应用程序按预期工作。

这种方法的另一个问题是,每次我构建角度应用程序时,我必须手动将polyfill,内联主等js文件输入到Index.cshtml文件中,这是一个痛苦而且看起来不像解决问题的正确方法。

所以有人知道我在这里做错了什么。我并不觉得我采取了正确的方法,因此对于替代方法的任何建议都会受到高度赞赏。

感谢。

0 个答案:

没有答案