Angular8首次加载时ng-select下拉框被模态框遮挡问题

问题现象 #

Angular 8项目中使用ng-select组件时出现层级异常：页面首次加载触发时，ng-select的下拉选项列表显示在模态框后方、被模态框遮挡，手动刷新页面后下拉列表层级自动恢复正常。已尝试为.ng-dropdown-panel设置z-index: 3000 !important，未解决首次加载的遮挡问题。

问题相关组件代码 #

<ng-select #selectSociety notFoundText="Aucun résultat" [items]="allOptions !== undefined ? allOptions : (societiesObs | async)"
                                        [loading]="societiesLoading" loadingText='Chargement...'
                                        [minTermLength]="2" bindLabel="name" bindValue="id" placeholder="Société"
                                        typeToSearchText="Entrez au moins 2 caractères" [typeahead]="societiesInput"
                                        formControlName="society_id"
                                        class="society quotation edit-select">

                                        <ng-template ng-footer-tmp>
                                            <div class="create-new"
                                                (click)="createSociety()">
                                                Ajouter une entreprise
                                            </div>
                                        </ng-template>

                                        <ng-template ng-option-tmp let-item="item" let-index="index" let-search="searchTerm">
                                            {{item.name}}
                                        </ng-template>
</ng-select>

现有自定义样式代码 #

.ng-select-wrapper {
    margin-bottom: 0;
    position: relative;
}
.ng-select {
    padding-bottom: 0;
    margin-bottom: 1.25em;
    
    .ng-select-container {
        .ng-value-container {
            align-self: center;
        }
    }
    .ng-arrow-wrapper {
        .ng-arrow {
            border-width: 4px 4px 2.5px;
        }
    }
}

.ng-select.billing .ng-select-container {
    background-color: #f0f9fe;
    border: none;
}
.ng-select.quotation .ng-select-container {
    background-color: #f0f9fe;
    border: none;

    &:hover {
        background-color: #cbf0ff;
    }
}
.ng-dropdown-panel {
    z-index: 3000 !important;
    .ng-dropdown-footer {
        cursor: pointer;
        &:hover {
            background-color: #f0f9fe;
        }
    }
}

.ng-select.edit-select {
    .ng-option {
        i {
            display: none;
            &:hover {
                color: $secondary;
            }
        }
        &:hover {
            i {
                display: block;
            }
        }
    }
}

问题效果参考 #

• 问题截图1
• 问题截图2

问题成因 #

1. 样式作用域失效：写在组件私有样式中的.ng-dropdown-panel z-index规则没有生效。Angular 8默认视图封装模式（Emulated）会给组件内样式添加专属属性选择器，而ng-select默认会把下拉面板.ng-dropdown-panel直接追加到<body>节点下，不在当前组件的DOM宿主范围内，导致首次加载生成的下拉面板根本没命中这条z-index规则。刷新页面后因为样式懒加载顺序、DOM重绘的偶然因素，全局默认样式碰巧生效，才会出现刷新后正常的现象。
2. DOM插入顺序优先级问题：模态框组件（ngx-bootstrap、ng-bootstrap等）都是动态插入DOM节点，默认z-index通常为1050，首次加载时如果下拉面板DOM插入时间早于模态框DOM，同层叠上下文下后插入的模态框节点会覆盖更早插入的下拉面板，即使z-index值设置更高也可能出现遮挡。

修复方案 #

按优先级从高到低选择即可：

• 优先使用组件原生配置解决：给ng-select添加appendTo属性，直接将下拉面板追加到模态框容器内部，从根源避免跨容器的层叠上下文冲突。操作步骤：
  1. 给模态框根节点添加模板变量：<div class="modal-content" #modalContainer>...</div>
  2. 给ng-select绑定配置：<ng-select ... [appendTo]="modalContainer">
     这种方式不需要额外调整z-index，下拉面板会作为模态框的子节点渲染，永远不会被模态框或遮罩层遮挡。
• 修正样式作用域：如果不想用appendTo，把针对.ng-dropdown-panel的z-index样式移到项目全局样式文件（styles.scss/styles.css）中，不要放在业务组件的私有样式里，确保规则能命中追加到body下的下拉面板节点。注意z-index值要高于模态框默认z-index，设置为1055以上即可，不需要设置到3000这么大。
• 特殊场景调整：如果同时使用了其他带弹层的组件，可在模态框初始化配置中调整模态框自身的z-index，确保层级逻辑统一，避免多个弹层组件互相抢占层级。

内容的提问来源于stack exchange，提问作者Upsilon