Question

因此，我有一个名为“个人资料”的页面，在该页面上您可以在背景之间进行选择，每个背景都有新的样式等。但是，每当我单击背景时，它也必须更改css，而不是更改css。 CSS页面变成白色空白，我确实知道为什么会这样。如果localstorage'banner'== 1将css更改为theme-1，则更改css，否则更改2..3..4 ..等。它的工作原理是，但仅当我刷新页面但是那不是我想要的。我想每当我单击背景时，它也必须更改css，但是现在它变成白色空白，无法执行任何操作，必须刷新页面以获取结果。希望你们能理解我想要的，因为我的英语有点不好。谢谢

我有一个名为theme.service.ts的服务

import { Injectable, OnInit } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { Storage } from '@ionic/storage';

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

  private theme: BehaviorSubject<String>;

  constructor(public storage: Storage) {
    this.theme = new BehaviorSubject('theme-1')
  }

  setActiveTheme(val) {
    this.theme.next(val);
  }

  getActiveTheme() {
    return this.theme.asObservable();
  }

  getCurrentTheme() {
    if (localStorage.getItem("banner") == "1") {
      this.setActiveTheme("theme-1");
    } else if (localStorage.getItem("banner") == "2") {
      this.setActiveTheme("theme-2");
    }
  }
}

在app.component.ts中，我检查当前主题

import { Component, ChangeDetectorRef } from '@angular/core';
import { Platform, NavController } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { Keyboard } from '@ionic-native/keyboard/ngx';
import { AuthService } from './service/auth.service';
import { Router, NavigationEnd } from '@angular/router';
import { ThemeService } from './service/theme.service';
import { Storage } from '@ionic/storage';


@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent {

  bannerStyle: string;
  selectedTheme: String;

  //  <!-------------------------- Constructor --------------------------->
  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private keyboard: Keyboard,
    public auth: AuthService,
    public router: Router,
    public theme: ThemeService,
    public storage: Storage,
    public navController: NavController,
    private ref: ChangeDetectorRef) {
    this.initializeApp();
    //  <!-------------------------- Current theme --------------------------->
    this.theme.getActiveTheme().subscribe(val => this.selectedTheme = val);
    this.theme.getCurrentTheme();
  }


  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.backgroundColorByHexString('#f4932c');
      this.keyboard.disableScroll(false);
      this.splashScreen.hide();
    });
  }
}

我正在与背景和主题一起进行实时变更

  //  <!-------------------------- JWT --------------------------->
  getJWT() {
    this.storage.get('JWT').then((val) => {
      // JWT gegevens
      this.childname = val.childname;
      this.email = val.email;
      this.bday = val.date.substring(0, 10);
      this.gender = val.gender;
      // Als de localstorage banner nog niet bestaat dan moet die de banner gewoon vanuit de JWT     pakken en anders via de localstorage zodra die een keer is veranderd.
      let banner = localStorage.getItem('banner');
  if (banner === null || !banner) {
    this.bannerStyle = "assets/img/background-" + val.bannernumber + ".jpg";
    this.theme.getCurrentTheme();
  } else if (banner !== null || banner.length > 0) {
    this.bannerStyle = "assets/img/background-" + banner + ".jpg";
    this.theme.getCurrentTheme();
  }
});
  }

更改主题动态IONIC 4使我的屏幕变白

0 个答案: