在组件Ionic 3 / Angular 5中动态更改Sass变量

Question

我想在一个页面中动态更改主色，并设置为应用程序的其余部分。

我正在按照这个教程来做https://robferguson.org/blog/2017/11/12/theming-your-ionic-3-app/所以试图适应我的背景这就是我正在做的事情。

app.html

<ion-nav [root]="rootPage" #content [class]="theme"></ion-nav>

app.component.ts

    export class MyApp {
         rootPage:any = WelcomePage;

         public theme: String = 'theme';


     constructor(platform: Platform, public event: Events ) {
    platform.ready().then(() => {

      event.subscribe('theme:toggle', () => {
        this.toggleTheme();
      });

    });

  }



public toggleTheme() {
    console.log('tooogletheme')
    if (this.theme === 'theme') {
      this.theme = 'theme2';
    } else {
      this.theme = 'theme';
    }
  }

/theme/variables.伸出双手

$theme_color: #063351; //Default

$colors: (
  primary:   $theme_color,
  secondary:  #32db64,
  danger:     #f53d3d,

/theme/theme.伸出双手

 .theme {
    $theme_color: rgb(0, 152, 145) !global; 
 }

/theme/theme2.伸出双手

  .theme2 {
     $theme_color: rgb(255,77,90)  !global;
  }

我想从另一页改变它，所以我打电话给...

 this.event.publish('theme:toggle');

这个事件被调用但没有任何反应。

谢谢你的帮助。

编辑：

当我将事件调用到切换类时，我可以看到离线导航中的类名更改。但我不知道$ theme-color是否正在改变，或者该类是否未应用于内容。

Answer 1

您可能需要使用ngClass指令，并动态添加适当的类：

<ion-nav [root]="rootPage" #content [ngClass]="theme"></ion-nav>