angular - `APP_INITIALIZER` - 由用户选择，可能吗？

Question

我已实施azure并adal.js使用我的应用程序。此应用程序由 2 组人使用。所以我保留了2个单独的配置。采用MsAdalAngular6Module应用程序启动本身的配置。

但我要求，让应用程序停止启动，直到屏幕中的登录选项可用，所以用户让选择他们的组，然后服务可以提供他们需要的应用程序初始化的配置。

Angular可以吗？或者通过用户选择使用不同配置初始化应用程序的正确方法是什么？

我尝试使用提供程序但出现错误，我在数组Error: StaticInjectorError(AppModule)[InjectionToken 中添加了服务和登录组件。deps:[]如何在这里提出解决方案？

有人给我建议吗？

这是我的尝试：

providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initializeApp,
      multi: true,
      deps: [AppConfig, SignInComponent] //added both service and component throw error..
    },
    MsAdalAngular6Service,
    {
      provide: 'adalConfig',
      useFactory: getAdalConfig,
      deps: []
    },
    {
      provide: HTTP_INTERCEPTORS,
      useClass: InsertAuthTokenInterceptor,
      multi: true
    }
  ],

标签： angularazureangular7adal

Answer 1

为了完成这项工作，我创建了一个自定义服务并实现了。这对我来说可以。

这是我的服务文件.ts：

import { Injectable } from '@angular/core';
import { Store, select } from '@ngrx/store';
import { StateShared } from "./../models/models";
import * as $ from 'jquery';

@Injectable({
    providedIn: 'root'
})
export class AppConfig  {

    value:boolean = true;
    option:string;
    popup = `
    <div class="site-wrapper"
        style="display:flex;flex-direction:column;
        min-height:100vh;border:0.5px solid rgba(0,0,0,0)">
    <div Id="optionHolder" class="main-section" style="
        flex: 1;
        display: flex;
        flex-direction:row;
        align-items: center;
        justify-content: center;
        padding:0 15px;
    ">

        <div class="singin-options" style="
            border: 3px dotted gray;
            display: flex;
            flex-direction:column;
            padding:1rem;

        ">
            <div class="form-check form-check-inline" style="
             margin-bottom: 1rem;
            ">
                <input class="form-check-input" (change)="onLoginChange($event)" value="CTS" type="radio" name="loginOption" id="inlineRadio1">
                <label class="form-check-label" for="inlineRadio1">Login as CTS Member</label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input" (change)="onLoginChange($event)" value="IBO" type="radio" name="loginOption" id="inlineRadio2">
                <label class="form-check-label" for="inlineRadio2">Login as IBO Member</label>
            </div>
        </div>
        <div class="signin" style="padding:1rem;">
            <button type="button" class="btn btn-success">Sign In</button>
        </div>

    </div></div>`

    constructor(private store:Store<StateShared>){}

    userOption:any;

    setUserOption() {

        let that = this;

        if(!this.value) return;

        return new Promise((resolve, reject) => {

            if(!localStorage.getItem("name")){

                $('body').append(this.popup);

                $("input[name=loginOption]:radio").change(function (event) {
                    that.userOption =  $(event.target).val();
                    $("button").prop('disabled', false);
                })

                $("button").prop('disabled', true);

                $("button").click(function () {
                    that.value = false;
                    localStorage.setItem("name", that.userOption);
                    resolve(true);

                })
            }

            if(localStorage.getItem("name")){
                resolve(true);
            }



        });
    }

    getUserOption(){

        $('body #optionWrapper').remove();

        switch (localStorage.getItem("name")) {
            case "CTS":
                return {
                    tenant: 'de08c407-19b9-427d-9fe8-edf254300ca7',
                    clientId: '828002a4-149f-478c-a318-933ad52b4c4f',
                    redirectUri: window.location.origin,
                    endpoints: {
                        "https://iboconfigservice.azurewebsites.net/api/":"828002a4-149f-478c-a318-933ad52b4c4f"
                    },
                    navigateToLoginRequestUrl: false,
                    cacheLocation: 'localStorage',
                    expireOffsetSeconds: 600,
                    postLogoutRedirectUri: window.location.origin
                };

            case "IBO":
                return {
                    tenant: 'intbacdev.onmicrosoft.com',
                    clientId: '5a5e1a7e-b31d-47bc-9be4-5a107f67fedb',
                    redirectUri: window.location.origin,
                    endpoints: {
                        "https://iboconfigservice.azurewebsites.net/api/":"828002a4-149f-478c-a318-933ad52b4c4f"
                    },
                    navigateToLoginRequestUrl: false,
                    cacheLocation: 'localStorage',
                    expireOffsetSeconds: 600,
                    postLogoutRedirectUri: window.location.origin
                };


            default:
                // code...
                break;
        }



    }

}