admin管理员组

文章数量:1516870

  1. 设置两套主题样式：
  2. 创建changetheme.ts: 

```javascript
import { Injectable } from '@angular/core';
import {BehaviorSubject} from "rxjs";
@Injectable()
export class Changetheme {
  // true: dark-theme
  // false: light-theme
   public theme: BehaviorSubject<boolean>;
  constructor(
  )
   
  {
    this.theme = new BehaviorSubject(false);
  }
  setActiveTheme(val) {
    this.theme.next(val);
  }
  getActiveTheme() {
    return this.theme.asObservable();
  }
}
  1. component.ts中使用 
// 订阅可观察者对象this.changetheme.getActiveTheme().subscribe(val =>{this.storage.get('useremail').then((val)=>{if(val !=null){this.hasuser=true;this.showlist=false;this.useremail=val;this.showinfos2();}else{this.showlist=true;this.hasuser=false;}});if(val ==true){this.selectedTheme ='dark-theme md ion-page hydrated'}else{this.selectedTheme ='light-theme md ion-page hydrated'}});
  1. html中 
<ion-app [class]="selectedTheme">
  1. 设置页面中ts 
toggleChangeTheme(){//   console.log(this.theme)this.changetheme.setActiveTheme(this.theme);}

html中： 

<ion-item  style="margin-top: 1%;" lines="none"><ion-label>
          夜间模式
        </ion-label><ion-toggle slot="end"[(ngModel)]="theme"(ionChange)="toggleChangeTheme()"></ion-toggle></ion-item>

效果：

本文标签： 至夜晚主一键切换新手指南

版权声明：本文标题：Ionic新手指南：一键切换至夜晚主题 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.betaflare.com/web/1771302415a3263977.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。