`APP_INITIALIZER` - 由用户选择,这可能吗?
`APP_INITIALIZER` - by User choice, Is it possible?
我的应用程序实现了 azure
和 adal.js
。此应用程序由 2 组人使用。所以我保留了 2 个单独的配置。 MsAdalAngular6Module
在应用启动时进行配置。
但我要求,让应用程序停止启动,直到屏幕上出现登录选项,这样用户才能select他们的组,然后服务可以提供应用程序初始化所需的配置。
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
}
],
为了完成这项工作,我创建并实施了自定义服务。它对我来说很好。
这是我的服务file.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;
}
}
}
我的应用程序实现了 azure
和 adal.js
。此应用程序由 2 组人使用。所以我保留了 2 个单独的配置。 MsAdalAngular6Module
在应用启动时进行配置。
但我要求,让应用程序停止启动,直到屏幕上出现登录选项,这样用户才能select他们的组,然后服务可以提供应用程序初始化所需的配置。
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
}
],
为了完成这项工作,我创建并实施了自定义服务。它对我来说很好。
这是我的服务file.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;
}
}
}