如何解决量角器中的 Angular ViewEncapsulation.ShadowDom 元素给出 StaleElementExceptionError
我在一个角度组件中有一个 iframe，我正在使用组件工厂（将本机元素附加到 iframe 的主体）动态地向其中注入一个组件 X。我这样做的原因是因为我需要媒体查询才能在组件中运行。如果没有 ViewEncapsulation.ShadowDom，框架内注入的组件将是“无样式”的。
到目前为止，一切都很好，而且功能完全符合我的要求。但是，在 e2e 测试期间，我无法访问 shadow-root 中的任何元素，我尝试了多种方法，例如 document.querySelector('component-id').shadowRoot.querySelector('element-id') 甚至提到的库和变通方法 {{3} }.
一切都导致同样的错误
StaleElementReferenceError: stale element reference: stale element not 找到
总结一下，
解决方法
我意识到这个答案可能无法解决您的特定问题，并且我冒着因投票失败而失去代表的风险，但我想根据我对上述问题的评论建议更改架构。
>由于您可以完全控制 iframe 的内容，因此我建议您设置 Angular 路由，以允许您为 iframe 指定一个路由来显示您的简单组件，同时保持应用程序的其余路由完整。
摘要
因此，假设您已正常设置应用程序的路由，并使用托管 app.component 标记的顶级组件（通常为 <router-outlet>），我将创建一个新的顶级组件（我们称之为 { {1}}) 的模板中仅包含 app-plain.component，没有其他内容。我会将应用程序设置为将此组件用作引导程序组件（而不是 <router-outlet></router-outlet>），然后我将更改路由配置以将所有现有路由作为新的空白路径路由 (app.component ) 以旧的 '' 作为其组件。
最后，我将使用一些路径（比如 app.component）设置一个新路由，该路由将使用您希望在 iframe 中显示的组件作为其组件（我们称之为 iframe）。>
这将允许您将 iframe.component 之类的元素放置在组件中的任何位置，并让它仅显示您的 <iframe src="/iframe"></iframe>。
实施
假设您现有的路由配置如下所示：
iframe.component我将修改路由配置如下：
const routes = [
{ path: '',pathMatch: 'full',redirectTo: 'home' },{ path: 'home',component: HomeComponent },// ... more routes here
];
如前所述，我将创建一个名为 const newRoutes = [
{ path: 'iframe',component: IframeComponent },{
path: '',component: AppComponent,children: routes // <-- the old routes
}
];
的新普通顶级组件，其模板中只有一个 app-plain.component，并将其设置为模块的引导程序组件：
<router-outlet>注意：由于引导程序组件已更改，因此您也必须在 @NgModule({
declarations: [...],imports: [...],providers: [...],bootstrap: [AppPlainComponent] // <-- this is the change
})
export class AppModule { }
中指定其选择器（而不是默认情况下的 index.html）
演示/示例
我用这个解决方案概念创建了一个 github repo。
我无法进行 StackBlitz，因为我尝试时 app-root 从未完成加载，这是我的 failed attempt。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
