如何将 css 规则应用于整个页面选择器类 ionic2

Question

我想在整个 ionic2 选择器类上应用一个特定的 css 类，而不是在 ion-content 上。

例如我有一个带有选择器的页面：

selector: 'home-page'

现在我想通过 ionic2 页面内的 TS 函数来切换一个 CSS 规则（切换一个类 'resize-page' ）。因此，每次我按下按钮时，它都会将此类添加或切换到整个页面选择器。

Answer 1

你可以使用ngClass:

<ion-content [ngClass]="getClass()">

</ion- content>

在你的 .ts 文件中：

buttonClickedTimes = 0;
getClass(): string {
    // based on how many times the button is clicked
    // return 'class-1' or 'class-2' 
    this.buttonClickedTimes % 2 == 0 ? 'class-1' : 'class-2';
}

clickButton(): void {
    this.buttonClickedTimes ++;
}

或者，正如iWork 在评论中建议的那样：

<ion-content [class]="buttonClickedTimes%2 === 0 ? 'class-1' : 'class-2'"></ion-content>