Question

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

another.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（同时包含到declarations和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>被重复渲染。标签中的浏览器微调框一直在转动。该应用正在循环执行操作，因此响应速度非常慢。

我认为custom元素会一次又一次地加载应用程序。我应该怎么做才能防止这种情况发生？

更新

由于我希望将自定义元素呈现在innerHtml中，因此服务器的响应会传递DomSanitizer。似乎消毒剂正在不断启动，并且有点阻止了该应用程序。

任何帮助将不胜感激！

InnerHtml中的Angular 6自定义元素不断重新加载

更新

0 个答案: