zoukankan      html  css  js  c++  java
  • [Angular] Configure an Angular App at Runtime

    It always again happens (especially in real world scenarios) that you need to configure your Angular app at runtime. That configuration might be fetched from some backend API, or it might be some simple JSON configuration sitting on your deployment server. The key here is that you want to be able to dynamically modify and adjust that configuration without the need to re-compile and re-deploy your application. Also, you most probably want that configuration to be loaded and ready once your application bootstrapping is done. In this lesson we learn how to make use of the APP_INITIALIZERto hook into Angular's initialization process. That will allow us to inject some configuration into our app just when it is about to start up.

    // app.module.ts
    
    const appInitializerFn = (configService: AppInitConfigService) => {
      return () => {
        return configService.loadAppConfig();
      };
    };
     ...
      providers: [
        AppInitConfigService,
        {
          provide: APP_INITIALIZER,
          useFactory: appInitializerFn,
          deps: [AppInitConfigService],
          multi: true
        }
      ],
    // app.init-config.service.ts
    
    import {Injectable} from '@angular/core';
    import {HttpClient} from '@angular/common/http';
    
    @Injectable()
    export class AppInitConfigService {
    
      private appConfig;
    
      constructor(private http: HttpClient) {
    
      }
    
      getConfig() {
        return this.appConfig;
      }
    
      loadAppConfig() {
        return this.http.get('/assets/data/app.config.json')
          .toPromise()
          .then((config) => this.appConfig = config);
      }
    }

    App will defer to load after the config is loaded.

    We can display the config's content in the component:

    import {ChangeDetectionStrategy, Component, OnInit} from '@angular/core';
    import {Observable} from 'rxjs/Observable';
    import {Store} from '@ngrx/store';
    
    import 'rxjs/add/operator/do';
    import 'rxjs/add/operator/shareReplay';
    import 'rxjs/add/operator/map';
    
    import * as fromRoot from '../../store/reducers/index';
    import * as authActions from '../../../auth/actions/auth';
    import {AuthService} from '../../../auth/services/auth.service';
    import {AppInitConfigService} from '../../../app.init-config.service';
    
    @Component({
      selector: 'ld-app',
      changeDetection: ChangeDetectionStrategy.OnPush,
      templateUrl: './ld-app.component.html',
      styleUrls: ['./ld-app.component.scss']
    })
    export class LdAppComponent implements OnInit {
    
      config: any;
      constructor(
           private configService: AppInitConfigService) {
        this.config = this.configService.getConfig();
      }
    
      ngOnInit() {
      }
    }
  • 相关阅读:
    C# post请求,Json转换实体类
    jq div 托拉拽
    json转换成实体类
    C# 队列、锁、异步
    关于C#调用protobuf 序列化和反序列化
    关于System.Data.Entity.Infrastructure.DbUpdateException 的问题
    C# 本地CSS和JS引用无问题,部署服务器之后出现500错误
    windows服务
    下拉加载更多DEMO(js实现)
    禁用iPhone手机浏览器上给电话号码自动加上的link样式
  • 原文地址:https://www.cnblogs.com/Answer1215/p/8333045.html
Copyright © 2011-2022 走看看