[cdk:portal] 微前端场景下可能会有问题，出现弹窗打不开

[brenner8023]

• I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

https://github.com/IDuxFE/idux-playground

Steps to reproduce

idux-playground中已经有一段弹窗代码，
点击打开弹窗，此时弹窗能够正常打开。
在playground中进行编辑，右侧iframe更新后，再次点击，弹窗打不开。

<template>
  <div style="padding: 24px">
    <IxButton @click="onOpen">Open modal11223344</IxButton>
  </div>
</template>

<script setup lang="ts">
import { useModal } from '@idux/components'

const { open } = useModal()
const onOpen = () => open({ header: 'Hello @idux', content: 'This is playground app' })
</script>

What is expected?

idux-playground中已经有一段弹窗代码，
点击打开弹窗，此时弹窗能够正常打开。
在playground中进行编辑，右侧iframe更新后，再次点击，弹窗可以打开。

What is actually happening?

第一次可以打开，在playground中进行编辑，右侧iframe更新后，再次点击，弹窗打不开。

Environment Info

Browsers:
Chrome: 101.0.4951.54
Edge: Spartan (44.19041.1266.0), Chromium (102.0.1245.33)
Internet Explorer: 11.0.19041.1566
npmPackages:
vue: ^3.2.33 => 3.2.31

---

1. 原因应该是代码编辑导致iframe重新刷新，这时ix-modal-container的dom被销毁，但是cdk/portal/src/convertTarget.ts里面的targetHashmap未清除。导致逻辑有问题，弹窗打不开。
2. 本质上是dom被销毁，导致targetHashmap保存的值与真实dom对应不上的问题。
3. 普通场景下，该问题一般不会出现，在微前端场景，该问题可能会碰到。

[idux-bot]

Translation of this issue:

[CDK: Portal] There may be problems in the front scene of the micro -end.

• I have searched the [issues] (https://github.com/iduxfe/idux/isSues) of this repository that this is not a duplicate.

REPRODUCTION LINK

[https://github.com/iduxfe/idux-playground.

STEPS To Reproduce

There is already a pop-up code in IDUX-Playground,
Click to open the pop -up window. At this time, the pop -up window can be opened normally.
Edit in Playground. After the right IFRAME is updated, click again, and the pop -up window cannot be opened.

<template>
  <div style="padding: 24px">
    <IxButton @click="onOpen">Open modal11223344</IxButton>
  </div>
</template>

<script setup lang="ts">
import { useModal } from '@idux/components'

const { open } = useModal()
const onOpen = () => open({ header: 'Hello @idux', content: 'This is playground app' })
</script>

What is exfected?

There is already a pop-up code in IDUX-Playground,
Click to open the pop -up window. At this time, the pop -up window can be opened normally.
Edit in Playground. After the right IFRAME is updated, click again, and the pop -up window can be opened.

What is actually happy?

It can be opened for the first time, edited in Playgroud, and after the right IFRAME update, click again, the pop -up window cannot be opened.

ENVIRONMENT Info

Browsers:
Chrome: 101.0.4951.54
Edge: Spartan (44.19041.1266.0), chromium (102.0.1245.33)
Internet explororr: 11.0.19041.1566
npmpackages:
Vue: ^3.2.33 => 3.2.31

---

1. The reason should be that the code editing causes the iX-Modal-Container's DOM to be destroyed, but the targethashMap in CDK/Portal/SRC/Converttarget.ts is not cleared. As a result, there is a problem with logic, and the pop -ups cannot be opened.
2. In essence, the DOM is destroyed, causing the value preserved by targethashmap to the problem that the real DOM does not correspond.
3. In ordinary scenarios, this problem generally does not appear. At the micro front scene, the problem may be encountered.

[brenner8023]

代码截图：

[brenner8023]

IDuxFE/idux-playground@e97f467

[danranVm]

是不是直接把 targetHashmap 干掉算了？

[brenner8023]

https://github.com/brenner8023/idux/blob/ddd67e3284b6575701e642da5e359f9c4e58431e/packages/cdk/portal/src/convertTarget.ts#L25-L30

这段代码还有个问题就是querySelector(temp)传的是temp，下面element.classList.add(temp)传的是也是temp，是个bug，因为传参一个需要字符串带点，另一个不需要带点。