在Ionic 3中为单个页面自定义模态

Posted 2021-04-17

我需要显示一个模态作为对话框，所以我将一些CSS应用到模态，它工作正常。但问题是同样的css被应用于所有其他模态页面，而不管调用模式的页面如何。这是我使用的CSS样式

ion-modal {
        @media (min-height: 500px) {
            ion-backdrop {
                visibility: visible;
            }
        }
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: $z-index-overlay;
        display: flex;
        align-items: center;
        justify-content: center;
        contain: strict;
        .modal-wrapper {
            &,
            .ion-page,
            .ion-page .content,
            .ion-page .content .scroll-content {
                contain: content;
                position: relative;
                top: auto;
                left: auto;
            }
            z-index: $z-index-overlay-wrapper;
            display: flex;
            overflow: hidden;
            flex-direction: column;
            min-width: $alert-min-width;
            max-height: $alert-max-height;
            opacity: 0;
            height: auto;
            max-width: $alert-md-max-width;
            border-radius: $alert-md-border-radius;
            background-color: $alert-md-background-color;
            box-shadow: $alert-md-box-shadow;
            .ion-page .content {
                background-color: $background-color;
            }
        }
        ion-item {
            p {
                text-overflow: unset;
                overflow: visible;
            }
        }
        ion-label {
            overflow: visible;
            text-overflow: unset;
            white-space: normal;
        }
        .title {
            font-weight: bold;
        }
        .selected-card {
            border: 3px solid #488aff;
        }
    }

为了使css工作，它必须全局应用，因为模态存在于页面组件之外，这也是其他模态也获得相同样式的原因。我想知道是否有任何方法可以在不进行全局风格变化的情况下实现我的目标。可以限制到特定页面的东西。任何帮助深表感谢。

答案

我认为你所有的模态selector文件中的.ts属性是相同的，那就是ion-modal。您可能有以下模态：

@IonicPage()
@Component({
  selector: 'ion-modal', // check here
  templateUrl: 'a-modal.html',
})
export class AModal {
}

@IonicPage()
@Component({
  selector: 'ion-modal', // check here
  templateUrl: 'b-modal.html',
})
export class BModal {
}

你需要在每个模态中给出单独的selector名称，如下所示：

@IonicPage()
@Component({
  selector: 'a-modal', // notice here
  templateUrl: 'a-modal.html',
})
export class AModal {
}

@IonicPage()
@Component({
  selector: 'b-modal', // notice here
  templateUrl: 'b-modal.html',
})
export class BModal {
}

现在，在各个css文件中更改样式，如下所示：

// in .scss files of AModal
a-modal{
 // your styling goes here
 .title {
            font-weight: bold;
        }
}

// in .scss files of BModal
b-modal{
 // your styling goes here
 .title {
            font-weight: normal;
        }
}

现在，您将在每个模态中获得单独的样式。

希望能帮助到你 ：）