量角器中的 Angular ViewEncapsulation.ShadowDom 元素给出 StaleElementExceptionError

Question

我在一个角度组件中有一个 iframe，我使用组件工厂动态地向其中注入一个组件 X（将本机元素附加到 iframe 的主体）。我这样做的原因是因为我需要媒体查询才能在组件中运行。如果没有 ViewEncapsulation.ShadowDom，在框架内注入的组件将是“无样式”的。

到目前为止，一切都很好，而且功能完全按照我的意愿工作。但是，在 e2e 测试期间，我无法访问 shadow-root 中的任何元素，我尝试了多种方法，例如 document.querySelector('component-id').shadowRoot.querySelector('element-id') 甚至提到了 here 的库和变通方法。

一切都会导致同样的错误

StaleElementReferenceError：过时的元素引用：过时的元素不是 找到了

总结一下，

• 一个带有 Shadow Dom 封装的 Angular 组件被注入到 iframe 中
• 无法使用所有可用方法访问注入组件的 shadowroot 内的元素

Answer 1

我意识到这个答案可能无法解决您的特定问题，并且我冒着因投票而失去代表的风险，但我想根据我对上述问题的 cmets 建议对架构进行更改。

由于您可以完全控制 iframe 的内容，我建议您设置 Angular 路由，以允许您为 iframe 指定一个路由，该路由将显示您的简单组件，同时保留应用程序的其余路由完好无损。

摘要

因此，假设您已正常设置应用程序的路由，并使用托管 <router-outlet> 标记的顶级组件（通常为 app.component），我将创建一个新的顶级组件（我们称之为 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 中指定其选择器（而不是默认情况下的 app-root）

演示/示例

我用这个解决方案概念创建了一个github repo。

我无法制作 StackBlitz，因为我尝试时 iframe 永远不会完成加载，这是我的 failed attempt。