StencilJs 在新窗口中渲染组件答案

【问题标题】：StencilJs render component in new windowStencilJs 在新窗口中渲染组件
【发布时间】：2021-01-30 01:51:11
【问题描述】：

我正在寻找如何使用 window.open 在新窗口中呈现使用 stenciljs 创建的聊天小部件的方法。

单击小部件图标时会打开新窗口，并且它应该保留当前在网站上导航时的任何状态。它还应该具有父级的样式和功能。

我知道通过 React 我可以利用门户来实现这一目标。但是有谁知道如何用 stenciljs 做到这一点？或者我应该尝试将 React 与 Stenciljs 一起使用，看看效果如何？

模拟代码：

<Host class="chat">
 {this.state.open ? (
   <div class="chat-wrapper">
     <chat-header customparam={this.customparam} />
     <chat-content anotherparam={this.anotherparam} />
   </div> 
  ) : (
   <open-chat
     label={this.state.openChatLabel}
     onClick={this.openChat.bind(this)} />
   )}
</Host>

所以我想在新窗口中打开这部分：

<div class="chat-wrapper">
  <chat-header customparam={this.customparam} />
  <chat-content customparam={this.customparam} />
</div>

我已经尝试写入新窗口并在那里附加标题和内容。但可能有更好的方法来做到这一点。如果你们中的任何人知道如何或有想法，请分享。解决此问题后将进行总结。

【问题讨论】：

标签： javascript reactjs typescript frontend stenciljs

【解决方案1】：

编辑：问题已解决。整个组件已经包含在新窗口中，必须为其分配一个不同的路径名，添加一个检查 window.location.href 的方法，然后更新组件状态。

【讨论】：