ng-zorro-antd 升级后 nz-dropdown-menu 样式出现问题
0
悬赏园豆：30
[已解决问题]
解决于 2024-12-27 23:02
从 angular 15 升级到 angular 19，从 ng-zorro-antd 15 升级到 ng-zorro-antd 19 之后，nz-dropdown-menu 出现问题
之前正常时是这样的
现在 dropdown-menu 跑到页面顶上去了
问题补充：
问题与 cdk-overlay-pane 的样式有关
ng-zorro-antd 15 正常时
<div id="cdk-overlay-0" class="cdk-overlay-pane" style="min-width: 62.9766px; position: static;">
</div>
ng-zorro-antd 19 问题时
<div id="cdk-overlay-0" class="cdk-overlay-pane" style="min-width: 1200px; bottom: 281px; right: 15px;">
</div>
对应的 ng-zorro-antd 实现源码 context-menu.service.ts#L37
const positionStrategy = this.overlay
.position()
.flexibleConnectedTo({ x, y })
.withPositions(LIST_OF_POSITIONS)
.withTransformOriginOn('.ant-dropdown');
this.overlayRef = this.overlay.create({
positionStrategy,
disposeOnNavigation: true,
scrollStrategy: this.overlay.scrollStrategies.close()
});
换成最简单的硬编码的 nz-dropdown-menu 没这个问题
最佳答案
0
终于通过增加一层 component 解决了
将下面的出问题的部分
<th class="text-center width--10" *ngIf="postType !== 128">
<span class="d-inline-block" *ngIf="postType === 1;else otherPostTypeTmpl">
<span id="icon-status-filter"
cnbDropdownContainer
[importComponent]="importPublishStatusDropdownContainer"
[(component)]="this.publishStatusDropdownContainer"
[title]="this.publishStatusDropdownContainer?.activeItem ? ('筛选: ' + this.publishStatusDropdownContainer?.activeItem?.description) : ''">
发布状态 <i style="font-size: inherit"
class="iconfont"
[ngClass]="this.publishStatusDropdownContainer?.activeItem ? ['icon-filter-filled'] : ['icon-filter']"></i>
</span>
</span>
<ng-template #otherPostTypeTmpl>发布状态</ng-template>
</th>
挪到一个新建的 component —— publish-status-dropdown.component.ts 中，然后引用这个组件，问题就消失了
<th class="text-center width--10" *ngIf="postType !== 128">
<cnb-publish-status-dropdown [postType]="postType"s></cnb-publish-status-dropdown>
</th>
