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

Question

我需要将模态显示为对话框，所以我对模态应用了一些 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工作，它必须全局应用，因为模态存在于页面组件之外，这就是其他模态也获得相同样式的原因。我想知道是否有任何方法可以在不进行全局风格更改的情况下实现我的目标。可以限制在特定页面的内容。任何帮助都非常感谢。

Answer 1

我认为您所有模态.ts文件中的selector属性都是相同的，那就是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;
        }
}

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

希望对:)有所帮助