在页面中指定离子组件 css 类

Question

我正在使用ionic 2 和angular 2 开发一个应用程序，并在其中使用ionic 2 组件ModalController。

我没有找到改变ModalController 大小的方法或配置。但是，我想在不同尺寸上使用它，即在我使用它的每一页上指定不同的尺寸。它的大小来自ionic 2css 类modal-wrapper。如果我覆盖用于计算大小的类或全局变量，则此调整将全局应用。换句话说，它没有在不同的页面中模块化。我发现在angular 2 中可以单独将样式应用于每个组件： https://angular.io/docs/ts/latest/guide/component-styles.html#!#using-component-styles

但是，这在 modal-wrapper 的情况下不起作用。我的问题是：

1. 能否以这种方式覆盖标准的ionic 2 类，还是仅与html tags 相关？
2. 可以这样应用scss 规则吗？如何？ modal-wrapper 定义 scss 规则。

Answer 1

我没有找到改变大小的方法或配置 模态控制器。但是，我想在不同尺寸上使用它，即 在我使用的每一页上指定不同的大小。

每次显示页面时，都会将具有该页面的Component 名称的类添加到<ion-page> 元素中。例如，如果我创建一个新的组件用作名为 CustomModalPage 的模态，您将看到在您的 html 中添加了一个 custom-modal-page 类。

<ion-page class="show-page custom-modal-page "> ... </ion-page>

您可以使用该类来更改给定模式的样式，而不会影响应用程序的其余模式。 请注意，这只是我发现的一种解决方法，我不确定它是否会以某种方式破坏其他东西。

首先我创建了一个带有两个按钮的页面，一个将打开自定义模式，另一个是默认模式。

.html 代码：

<ion-header>

  <ion-navbar>
    <ion-title>ModalController Demo</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
    <h5>ModalController with custom size</h5>

    <button (click)="presentCustomModal()">Open Custom Modal</button>

    <button (click)="presentDefaultModal()">Open Default Modal</button>

</ion-content>

.ts 代码：

import { Component } from '@angular/core';
import { NavController, ModalController, ViewController } from 'ionic-angular';

@Component({
    templateUrl: 'build/pages/modal-controller-custom-size/modal-controller-custom-size.html',
})
export class ModalControllerCustomSizePage {

    constructor(private navCtrl: NavController, private modalCtrl: ModalController) {

    }

    presentCustomModal() {
        let customModal = this.modalCtrl.create(CustomModalPage);

        customModal.onDidDismiss(() => {
            // Do what you want ...
        });

        // Present the modal
        customModal.present();
    }

    presentDefaultModal() {
        let defaultModal = this.modalCtrl.create(DefaultModalPage);

        defaultModal.onDidDismiss(() => {
            // Do what you want ...
        });

        // Present the modal
        defaultModal.present();
    }

}

/* ********************
    Custom modal 
********************* */
@Component({
    template:   '<ion-header>' +
                    '<ion-navbar dark>' +
                        '<ion-title>My custom modal</ion-title>' +
                        '<ion-buttons end>' +
                            '<button (click)="dismiss()">Close</button>' +
                        '</ion-buttons>' +
                    '</ion-navbar>' +
                '</ion-header>' +
                '<ion-content padding>' +
                    '<h5>Modal content...</h5>' +
                '</ion-content>',
})
class CustomModalPage {

    constructor(public viewCtrl: ViewController) {

    }

    public dismiss() {
        this.viewCtrl.dismiss();
    }
}

/* ********************
    Default modal 
********************* */
@Component({
    template:   '<ion-header>' +
                    '<ion-navbar>' +
                        '<ion-title>Default modal</ion-title>' +
                        '<ion-buttons end>' +
                            '<button (click)="dismiss()">Close</button>' +
                        '</ion-buttons>' +
                    '</ion-navbar>' +
                '</ion-header>' +
                '<ion-content padding>' +
                    '<h5>Modal content...</h5>' +
                '</ion-content>',
})
class DefaultModalPage {

    constructor(public viewCtrl: ViewController) {

    }

    public dismiss() {
        this.viewCtrl.dismiss();
    }
}

请注意，我已将我用作模态的两个组件包含在同一个 .ts 文件中，只是为了便于阅读。

一旦我们有了它，我们就可以通过添加一些样式规则来更改自定义模式的样式，如下所示：

.custom-modal-page {
    height: 25%;
    position: absolute;
    top: 75%;

    ion-content {
        background-color: #333;
        color: #eee;
    }
}

如您所见，这些样式将仅应用于自定义模式，而不是默认模式。由于我们没有修改modal-wrapper，但我们确实修改了它的内容，modal-wrapper 将禁用页面的其余部分，直到我们关闭模式。