Ionic2 - 动态更改页面外观

Question

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

我需要找一种页面测试方法来切换离子内容样式。

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>