Элемент Angular 6 Custom внутри InnerHtml продолжает перезагружаться
Я успешно написал приложение 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>
отображается повторно. Вкладка браузера во вкладке все время крутится. Приложение реагирует довольно медленно, поскольку делает что-то в цикле.
Я думаю, что пользовательский элемент загружает само приложение снова и снова. Что я должен изменить, чтобы предотвратить это?
Обновить
Поскольку я хочу, чтобы пользовательский элемент отображался внутри innerHtml
, ответ с сервера проходит DomSanitizer
, Кажется, что дезинфицирующее средство постоянно работает и блокирует приложение.
Любая помощь будет принята с благодарностью!