Angular 8中调用同弹窗组件宽度不同是否导致Paginator内图片不居中？

问题结论 #

这个布局差异大概率是弹窗宽度设置不同直接导致的，核心原因和你项目中的响应式样式规则、组件继承的弹窗样式有关。

具体原因分析 #

• 如果你用的是PrimeNG这类UI库的Dialog组件，或者HelpCompComponent、Paginator组件内部写了媒体查询类的响应式规则，700px和1000px刚好命中了不同的样式规则阈值，就会出现布局差异。比如常见的@media (min-width: 992px)规则，700px宽度的弹窗不会命中该规则，1000px的刚好命中，就会出现两套布局。
• Paginator内部图片未居中的问题，大多是因为图片的居中规则（比如margin: 0 auto、text-align: center、flex居中）依赖父容器的宽度计算，弹窗宽度变化时如果父容器的display、padding、宽度百分比规则发生变化，就会导致居中失效。
• 你共用的edit-popup自定义样式类如果有和宽度关联的子元素样式规则，也会触发该问题。

排查&解决方法 #

1. 打开浏览器开发者工具，分别选中两个弹窗中Paginator的图片元素，对比匹配到的CSS规则差异，就能直接定位到是哪条规则在不同宽度下生效导致的问题。
2. 给Paginator的图片容器加高优先级的固定居中规则，避免受父容器宽度变化影响，示例代码如下：

/* 假设你的Paginator图片容器类名为paginator-img-wrapper */
.paginator-img-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 或者直接给图片加规则 */
.paginator-img-wrapper img {
  display: block;
  margin: 0 auto;
}

3. 如果你需要两个弹窗的布局完全一致，可以直接给HelpCompComponent的根容器加固定宽度，或者统一配置响应式规则，不依赖弹窗的宽度参数。

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