Стили загрузки в ионическом динамически из файла, загруженного через http ⇐ CSS

[Anonymous]

Во -первых, извините за мой английский ...
Я пытаюсь разработать приложение с автономным угловым/ионным с использованием конденсатора. Я хотел бы, чтобы он по умолчанию имел предварительно установленные стили, и чтобы они были объявлены в моем файле переменных в папке тем. Он настроен на перенаправление на страницу конфигурации в пути '/config' для сбора некоторых пользовательских значений и загрузки его файла конфигурации:
private async ionViewDidEnter(): Promise {
Promise.all([
this._services._storage.getItem('configClient', true),
this._services._storage.getItem('news', true),
this._services._storage.getItem('chg_pin', true),
this._services._storage.getItem('user', true),
this._services._storage.getItem('remember', true),
])
.then(async (responses) => {
// Mostrar pagina de configuración o no si es la primera vez que se conecta.
if(responses[0] == null) {
this._services._router.navigate(['/config']);
}else {
//Carga de configuracion y estilos del cliente si ya se ha conectado alguna vez
await this._services._configuration.getStorageClientConfig();

}
})
.catch((e) => {
console.error('ErrorInitLogin', e.message);
})
.finally(() => {
this._services.splashscreen.hide();
});
}
< /code>
Если у вас нет предыдущей конфигурации: < /p>
public async sendConfig(configForm): Promise {
if(this.configForm.invalid) return;
await this._services._loading.showLoading(this._services._translate.instant('pages.configuration.sending_data'), 0);
this._services._configuration.initClientConfig()
.then(() => {
this._services._loading.dismiss();
this._services._menu.swipeGesture(true, 'menu-ctx');
this._services._router.navigate(['login']);
})
.catch(() => {
this._services._loading.dismiss();
this._services._toast.showToast(this._services._translate.instant('pages.configuration.error_sending_data'), 'bottom', 'danger');
});
}
< /code>
Затем я вызову службу конфигурации, которая загружает файл конфигурации для этого пользователя с FTP -сервера. < /p>
public initClientConfig(): Promise {
return new Promise((resolve, reject) => {
// Recuperar Configuración desde servidor
this.getConfig()
.then((response) => {
// Establecer Servidores
this.setAppServer();
//Inicializar Modulos
this.setAppModules();
resolve(true);
});
});
}
< /code>
Служба загружает файл следующим образом: < /p>
public getConfig(): Promise {
return new Promise((resolve) => {
this._http.send(
this.currentClient.url,
'GET',
{},
[
{
"x-auth-header": "**********************************"
}
]
)
.then(async (response: ConfiguracionCliente) => {
this.clientConfig = response;
if(this.clientConfig && !GenericMethods.isNullOrEmpty(this.clientConfig.build)) {
this._storage.setItem('configClient', this.clientConfig, true);
this._theme.initClientTheme(this.clientConfig);
if(this.clientConfig.servers?.length > 0) {
this._server.servers = this.clientConfig.servers;
}
if(this.clientConfig.modulos?.length > 0) {
this._modules.arrayModules = this.clientConfig.modulos;
}
if(!GenericMethods.isNullOrEmpty(this._app.appInfo.version) && (this._app.appInfo.version < this.clientConfig.version)) {
this.showPermissions = true;
const version = await this._modal.create({
component: ModalVersion,
id: 'version',
initialBreakpoint: 1,
breakpoints: [0, 1],
backdropDismiss: false
});
await version.present();
}
}
resolve(this.clientConfig);
})
.catch((e) => {
console.error('ErrorGetClientConfig: ', e.message);
this.getStorageClientConfig()
.then((response) => {
if(response) {
resolve(this.clientConfig);
}else {
resolve(null);
}
})
});
})
}
< /code>
Из этого файла я получаю имя клиента, его логотип, серверы, модули и свойство со стилями следующим образом < /p>
{
"version": "3.0.0",
"build": 81,
"usuario": "NombreUsuario",
"logo": "https://url_que_apunta_al_logo",
"servers": [
{...},
{...}
],
"modules": [
{...},
{...}
],
"theme": {
"primary": "#FF6600 !important",
"primary-rgb": "255,102,0 !important",
"primary-contrast": "#ffffff !important",
"primary-contrast-rgb": "0,0,0 !important",
"primary-shade": "#e05a00 !important",
"primary-tint": "#ff751a !important",

"secondary": "#FF8D00 !important",
"secondary-rgb": "255,141,0 !important",
"secondary-contrast": "#ffffff !important",
"secondary-contrast-rgb": "0,0,0 !important",
"secondary-shade": "#e07c00 !important",
"secondary-tint": "#ff981a !important",

"tertiary": "#FFC299 !important",
"tertiary-rgb": "255,194,153 !important",
"tertiary-contrast": "#ffffff !important",
"tertiary-contrast-rgb": "0,0,0 !important",
"tertiary-shade": "#e0ab87 !important",
"tertiary-tint": "#ffc8a3 !important",

"success": "#439467 !important",
"success-rgb": "67,148,103 !important",
"success-contrast": "#ffffff !important",
"success-contrast-rgb": "255,255,255 !important",
"success-shade": "#3b825b !important",
"success-tint": "#569f76 !important",

"warning": "#FF8D00 !important",
"warning-rgb": "255,141,0 !important",
"warning-contrast": "#000000 !important",
"warning-contrast-rgb": "0,0,0 !important",
"warning-shade": "#e07c00 !important",
"warning-tint": "#ff981a !important",

"danger": "#CE352C !important",
"danger-rgb": "206,53,44 !important",
"danger-contrast": "#ffffff !important",
"danger-contrast-rgb": "255,255,255 !important",
"danger-shade": "#b52f27 !important",
"danger-tint": "#d34941 !important",

"dark": "#222222 !important",
"dark-rgb": "34,34,34 !important",
"dark-contrast": "#ffffff !important",
"dark-contrast-rgb": "255,255,255 !important",
"dark-shade": "#1e1e1e !important",
"dark-tint": "#383838 !important",

"medium": "#999999 !important",
"medium-rgb": "153,153,153 !important",
"medium-contrast": "#000000 !important",
"medium-contrast-rgb": "0,0,0 !important",
"medium-shade": "#878787 !important",
"medium-tint": "#a3a3a3 !important",

"light": "#f7f7f7 !important",
"light-rgb": "247,247,247 !important",
"light-contrast": "#000000 !important",
"light-contrast-rgb": "0,0,0 !important",
"light-shade": "#d9d9d9 !important",
"light-tint": "#f8f8f8 !important",

"header": "#e05a00 !important",
"header-rgb": "224,90,0 !important",
"header-contrast": "#ffffff !important",
"header-contrast-rgb": "255,255,255 !important",
"header-shade": "#c54f00 !important",
"header-tint": "#e36b1a !important"
}
}
< /code>
Служба конфигурации, как только файл загружен, вызывает службу темы, чтобы запустить конфигурацию темы со значениями, доставленными из загруженного файла следующим образом: < /p>
public initClientTheme(clientConfig: ConfiguracionCliente): Promise {
return new Promise((resolve) => {
if(clientConfig && clientConfig.theme) {
this.nameEmpresa = clientConfig.empresa;
this.logo = clientConfig.logo;
this.temaCliente = clientConfig.theme;
this.ngZone.run(() => {
Object.keys(this.temaCliente).forEach((key) => {
this.render.setStyle(document.documentElement, `--ion-color-${key}`, this.temaCliente[key]);
});
});
resolve(true);
}else {
console.error('ErrorInitClientTheme');
resolve(false);
}
console.log(`--ion-color-primary: ${JSON.stringify(document.documentElement.style)}`);
});
}
< /code>
Факт в том, что в этой последней консоли. Из: root с переменными и значениями, доставленными из файла конфигурации, но он не отображается с помощью новых цветов, а с предыдущими ... < /p>
Любые идеи Как динамически изменить стили приложения на основе загруженного файла и как сделать его постоянным, чтобы эти стили загружались всякий раз, когда приложение вновь открывается после настройки для запуска? < /p>
Спасибо, ребята, ребята !!! < /p>
Я хотел бы узнать, сможет ли кто -нибудь из вас придумать, как я могу загрузить этот файл конфигурации, и с ним настроить мое приложение на основе зарегистрированного пользователя, размещения своих стилей и делая их настойчивыми всякий раз, когда открывается приложение.

Подробнее здесь: https://stackoverflow.com/questions/794 ... d-via-http