3

我成功编写了一个运行良好的 Angular 6 应用程序。它正在从远程服务器加载一些内容，其中包含一些 HTML 代码。此代码显示在例如这样的 DIV 元素内：

另一个.component.html

<div [innerHtml]="responseFromServer"></div>

现在我想包含自定义元素，以便服务器可以提供自定义 html 内容，例如

来自服务器的响应：

<my-custom-element><p>Some other HTML-content from the server</p></my-custom-element>

为了识别这个自定义元素，我做了：

  • add @angular/elements在我的应用程序的控制台中。
  • 添加"@webcomponents/custom-elements": "^1.0.8"到package.json
  • MyCustomElementComponent在app.module.ts(todeclarations和entryComponents)中添加并声明了组件
  • 像下面这样constructor写：AppModule

app.module.ts：

constructor( private injector: Injector ) {
        const ii = createCustomElement( MyCustomElementComponent, { injector } );
        customElements.define( 'my-custom-element', ii );
    }


ngDoBootstrap() {}

问题

在某种程度上，该应用程序运行良好。问题是浏览器不断重新加载应用程序。在开发工具中检查元素时，我可以看到<my-custom-element>重复渲染。选项卡中的浏览器微调器一直在转动。该应用程序响应相当缓慢，因为它正在循环执行某些操作。

我认为自定义元素一次又一次地加载应用程序本身。我应该改变什么来防止这种情况发生？

更新

由于我希望在内部呈现自定义元素innerHtml，因此来自服务器的响应通过DomSanitizer。似乎消毒剂正在连续发射并且有点阻塞应用程序。

任何帮助将不胜感激！

4

0 回答 0