Загрузить собственный веб-компонент (не угловой компонент) внутри углового веб-компонента

Question

У меня есть угловой компонент контейнера с именем AppComponent. Я хочу загрузить свой неугловой компонент HelloComponent внутри AppComponent.

Моя настоящая цель - загрузить существующие старые компоненты в угловые 6 компонентов.

export class HelloComponent extends HTMLElement {
   constructor() {
      super();
   }
   connectedCallback() {
      this.innerHtml = `<h1>Native component loaded successfully</h1>`;
      //init and load component.
   }
}

мой угловой код выглядит следующим образом:

<angular-app>
     <hello-comp></hello-com>
</angular-app>

Как мне внедрить этот HelloComponent в этот класс.

HTML CustomElements не работает.

Answer 1

Пока собственный компонент правильно определен, он должен загружаться где угодно. Не забудьте позвонить customElements.define('hello-comp', HelloComponent); после определения класса HelloComponent

Я предполагаю, что вы используете импорт es6, поэтому вам нужно будет импортировать файл HelloComponent в ваш угловой файл.

И убедитесь, что вы работаете в браузере, который поддерживает собственные компоненты, или убедитесь, что загружаете полифилл.