Question

我目前正在使用Angular2处理应用程序。现在我完成了应用程序的样式，我想制作更多主题来切换。

我已经尝试将我的styleUrls设置为变量并在点击时更改它，但这不起作用。

    let styles= nightflat

@Component({
      selector: 'start-app',
      template: `
<div class="ui-g ui-g-nopad">
      <div class="ui-g-12 ui-g-nopad" id="header">
            <img src="../src/resources/icon/c2logo.png" alt="Logo" id="logo">
            <button pButton icon="fa-sign-out" id="LogOut" type="button" label="LogOut" (click)="gotoLogout()"></button>
            <h1></h1> 
      </div>
      <div class="ui-g-12 ui-g-nopad">
            <p-breadcrumb [model]="bcitems"></p-breadcrumb>
      </div>
      <div class="ui-g-12 ui-g-nopad"> 
            <div class="ui-g-2 ui-g-nopad"> 
                  <p-panelMenu id="menu" [model]="itempanel"></p-panelMenu>
            </div>
            <div class="ui-g-10 ui-g-nopad" id="router-outlet">
                  <router-outlet> </router-outlet>
                  <div class="ui-g-12 ui-g-nopad">
                  <button pButton id="goBack" type="button" label="Zurück" (click)="goBack()"></button>
            </div>
            </div>
      </div>
</div>
    `
      ,
      styleUrls: [styles],
      directives: [Button],
      providers: []
})

＆＃34; nightflat＆＃34;是我的style-urls.ts的导入，为我想要使用的每个样式提供了一个css路径（直到现在只有2个）：

export var nightflat = './dist/resources/scss/app.component.css'
export var froggy = './dist/resources/scss/test.component.css'

然后我尝试使用Buttonclickevent调用的函数将styles变量设置为另一个值。

setStyle(){
styles = froggy;
}

嗯，那根本不起作用。第一个问题：因为我正在使用gulp-inject - 我是否必须将所有样式表注入我的index.html？第二个问题：我应该如何切换点击？

Angular2 - 在样式之间切换

0 个答案: