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

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 в свой угловой файл.

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