Элемент 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, Кажется, что дезинфицирующее средство постоянно работает и блокирует приложение.

Любая помощь будет принята с благодарностью!

0 ответов

Другие вопросы по тегам