Question

我开始使用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设置应用程序，但我没有找到任何具体到我提到的点。

Answer 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>

在Angular 5中配置并手动运行应用程序

1 个答案: