Angular 6 SDK问题解决：优化Ant Design与Angular集成

在Angular 6项目中，集成Ant Design时遇到的一个主要问题是其SDK（Software Development Kit）的全局覆盖问题。Angular的SDK设计并不遵循模块化原则，而是直接附加到body元素上，这导致了在使用Ant Design的弹出组件如select、dropdown或picker时，弹出层会遮挡并接管全局的SDK，用户需要点击SDK才能关闭正在显示的下拉列表，造成用户体验上的不便，特别是在产品要求高交互效率的场景下。 解决这个问题的方案有两种：一是修改底层源码，移除SDK，但这将带来巨大的开发成本，可能导致更多的bug和维护难题，对于缺乏专门前端架构支持的团队来说，这是一个不可取的选择。另一种方法更为巧妙，它通过调整策略来规避问题： 1. **缩小SDK尺寸**：将SDK的大小调整为1x1像素，确保鼠标在页面上任意位置都能触发点击事件，避免因SDK覆盖造成的点击问题。 ```javascript .cdk-overlay-backdrop { width: 1px !important; height: 1px !important; } ``` 2. **监听全局点击事件**：在文档对象模型（DOM）上添加事件监听器，以便在用户点击时处理隐藏弹出层的行为。 ```javascript document.addEventListener('click', (e) => { this.prepareHideModal(e); }); ``` 3. **识别弹出组件标识**：对于不同的Ant Design组件，可能需要根据其特定属性或类名获取其唯一的标识。例如，对于select和picker，可以通过检查class属性找到与SDK相关的标识，而对于没有明显标识的组件，可能需要利用`getAttributeNode()`和`getAttributes()`方法。 ```javascript getSign(e) { // ... (代码根据组件类型检查并提取sign) if (v.getAttributeNode && v.getAttributeNode('someAttribute')) { this.sign = v.getAttributeNode('someAttribute').value; } else { // 处理特殊情况 } } ``` 通过以上步骤，即使保留SDK，也能实现单击操作关闭弹出层，提高用户交互体验，同时避免了大规模修改源码带来的风险。这对于那些面临类似问题但缺乏深入架构支持的Angular项目团队来说，是一种实用且有效的解决方案。