微前端micro-app使用产生的子项目bug(blockly-js 定位失效问题)

1.bug环境

angular13 框架,
blockly 谷歌积木插件,
micro-app 微前端,
NG-ZORRO组件库中的drawer组件。

2 非micro-app环境 出现的bug

单独项目中，出现blockly 组件定位失效的问题。

2.1 分析问题

通过点击可以感受到，项目中blockly块的定位出现问题。
所以进行正常分析，肯定块显示的上层附近定位，位置出现问题。

2.2 定位问题

通过分析得知是上层定位出现问题，打开开发者模式，通过选中分析它的上层父级，父级是html元素。
因为ng-zorro 组件drawer 抽屉当打开时，会给html添加.cdk-global-scrollblock类，并进行定位赋值。

2.3 解决问题

通过定位问题，知道问题所在，所以通过js进行修改。
修改过程：
当打开drawer的时候，通过js对html进行修改，当关闭drawer的时候，对html进行数值的回退

3 micro-app 微前端环境 出现的bug

微前端项目中，出现blockly 组件定位失效的问题。

3.1 分析

通过点击可以感受到，项目中blockly块的定位出现问题。
所以进行正常分析，肯定块显示的上层附近定位，位置出现问题。

3.2 定位

通过分析得知是上层定位出现问题，打开开发者模式，通过选中分析它的上层父级，父级是微前端的micro-app元素。
因为是微前端，所以是嵌套的方式，此时侧边栏是占有位置的。但是blockly获取的位置是获取的整个页面的位置，而父亲不是html，而是micro-app，所以照成了位置显示的错误。

3.3 解决

通过定位问题，知道问题所在，所以通过js进行修改。
修改过程：
当打开drawer的时候，通过js对micro-app元素进行修改，当关闭drawer的时候，对micro-app元素进行数值的回退