Ionic2 - 动态更改页面外观

Question

根据主题，我的应用有 2 种主题。但是，主题之间共享一些页面。所以，基本上我需要根据主题设置不同的离子含量。

我需要找到一种方法让页面测试在 ion-content 样式之间切换。

page-test {
  ion-content{
  background-image: url('../assets/mybkg.png');
  background-size: cover;
  color: black;
}

.page-test {
   ion-content{
     background: #78d2ff;
     background: -moz-linear-gradient(top, #78d2ff 0%, #0080c0 100%);
     background: -webkit-linear-gradient(top, #78d2ff 0%, #0080c0 100%);
     background: linear-gradient(to bottom, #78d2ff 0%, #0080c0 100%);
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#78d2ff', endColorstr='#0080c0', GradientType=0);
     color: white;
  }
}

实际上，我正在复制页面以用于不同的主题。不好，因为我在复制html，代码，这样的情况很多，所以维护会这么快。

有人对如何存档有建议吗？

Answer 1

基于这个amazing post 你可以做这样的事情。在此演示中，您可以动态更改样式，还可以根据当前主题隐藏/显示视图的某些部分。

1) 添加主题

在您的 src/theme 文件夹中，添加两个新文件：theme.light.scss 和 theme.dark.scss：

// theme.light.scss
// -----------------
.light-theme {
  ion-content {
    background-color: #fff;
  }

  .toolbar-background {
    background-color: #fff;
  }
}

还有

// theme.dark.scss
// -----------------
.dark-theme {
  ion-content {
    background-color: #090f2f;
    color: #fff;
  }

  .toolbar-title {
    color: #fff;
  }

  .header .toolbar-background {
    border-color: #ff0fff;
    background-color: #090f2f;
  }
} 

然后在您的src/theme/variables.scss 文件中添加以下内容：

@import "theme.light";
@import "theme.dark";

2) 创建提供者

创建一个SettingsProvider（src/providers/settings/settings.ts）来处理当前主题的变化，像这样：

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/Rx';

@Injectable()
export class SettingsProvider {

    private theme: BehaviorSubject<String>;

    constructor() {
        this.theme = new BehaviorSubject('dark-theme');
    }

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

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

然后您需要将新的提供程序添加到 app.module.ts 文件中：

@NgModule({
    declarations: [
        // ...
    ],
    imports: [
        // ...
    ],
    bootstrap: [IonicApp],
    entryComponents: [
        // ...
    ],
    providers: [
        // ...
        SettingsProvider
    ]
})
export class AppModule { }

3) 更新 AppComponent

然后在您的 src/app/app.component.ts 文件中，添加以下内容：

import { SettingsProvider } from './../providers/settings/settings';
import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { HomePage } from '../pages/home/home';
@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = HomePage;
  selectedTheme: String;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, private settings: SettingsProvider) {
    this.settings.getActiveTheme().subscribe(val => this.selectedTheme = val);

    platform.ready().then(() => {
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }
}

在视图中 (src/app/app.html)：

<ion-nav [root]="rootPage" [class]="selectedTheme"></ion-nav>

4) 改变主题

要更改当前主题，只需使用SettingsProvider，如下所示：

import { SettingsProvider } from './../../providers/settings/settings';
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  selectedTheme: String;

  constructor(public navCtrl: NavController, private settings: SettingsProvider) {
    this.settings.getActiveTheme().subscribe(val => this.selectedTheme = val);
  }

    toggleAppTheme() {
    if (this.selectedTheme === 'dark-theme') {
      this.settings.setActiveTheme('light-theme');
    } else {
      this.settings.setActiveTheme('dark-theme');
    }
  }

}

在视图中：

<ion-header>
  <ion-navbar>
    <ion-title>
      Night & Day
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <p text-center>I shine at night and glow at day.</p>
  <button ion-button full icon-left (click)="toggleAppTheme()">
    <ion-icon  name="bulb"></ion-icon>Toggle Theme
  </button>
</ion-content>