在 Angular 5 中配置和手动运行应用程序答案

【问题标题】：Configure and manually run application in Angular 5在 Angular 5 中配置和手动运行应用程序
【发布时间】：2018-01-13 04:59:19
【问题描述】：

我开始使用 Angular，更具体地说是 v5，但我遇到了一些问题。

我的一个要求是有一种方法可以从 HTML 页面配置和手动引导应用程序。我进行了一些研究，发现 Angular v1.x 有办法做到这一点。示例：

配置：

var config = { //my configuration object }
myApp.config(['myConfigProvider', 'myBaseFeaturesProvider', function(myConfigProvider, myBaseFeaturesProvider) {
  //make the necessary configuration with the config object
}]);

然后运行应用程序，将其插入页面上的特定位置：

myApp.run(['$templateCache', function($templateCache) {
  angular.element('#myId').html($templateCache.get('path/to/app/html/app.html'));
}]);

我的问题是如何在 Angular 5 中做到这一点？目前我使用 angular-cli 设置应用程序，但我没有找到任何具体到我提到的点。

【问题讨论】：

标签： angular-cli angular5

【解决方案1】：

经过大量的挖掘和讨论，我可以找到我的问题的答案。我在这里添加了实现所需解决方案的步骤：

在main.ts 文件中导入一个全局配置类，其中包含我的配置对象和设置和获取属性所需的逻辑：

import { Configuration } from './app/bootstrap/configuration';

同样在main.ts 文件中，创建一个对象来处理配置并使Angular 引导程序如下：

window['myConfigurationFunction'] = {
  config: function (config) {

    // Set the configuration as a class attribute
    Configuration.features = config;

    // Bootstrap Angular
    platformBrowserDynamic().bootstrapModule(myApp);
  }
}

在组件中，使用具有index.html 上定义的设置的全局配置类：

import { Injectable } from '@angular/core';
import { Configuration } from './app/bootstrap/configuration';

@Injectable()
export class MyService {
    constructor() { }

    log() {
        console.log('My property', Configuration.features.myProperty);
    }
}

在index.html中，调用之前在main.ts文件中定义的配置函数：

[...]
<my-app></my-app>
<script>
    let configExample = {
        myProperty: 'Hello World!'
    }

    myConfigurationFunction.config(configExample);
</script>

【讨论】：