Как прикрепить угловой компонент к стороннему приложению

Я хотел бы поместить свой компонент в приложение во время выполнения, и оно будет интегрировано с Angular.

Думаю, похожая функция:

Звоните через XHR
Поместите ответ на узел с помощью innerHtml

Но с точки зрения Angular компонент может интегрироваться с приложением, реагировать на перехватчики жизненного цикла, может реагировать на события щелчка и вызывать службу.

angular dynamic web-component angular-components

05.08.2018 04:36

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Angular и React для вашего проекта веб-разработки?

Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...

Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf

Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.

Угловой продивер

Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.

Мое недавнее углубление в Angular

Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...

Освоение Observables и Subjects в Rxjs:

Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular

Ответы 1

вы используете для этого веб-компоненты Angular, которые были представлены в Angular 6.0

Следуйте следующему руководству https://medium.com/@tomsu/building-web-components-with-angular-elements-746cd2a38d5b

После создания элементов веб-компонента, мы можем использовать это следующим образом

<!DOCTYPE html>
<html lang = "en">

<head>
  <meta charset = "UTF-8">
  <title>Custom Button Test Page</title>
  <script src = "elements.js"></script>
</head>

<body>
  <custom-button label = "First Value"></custom-button>

  <script>
    const button = document.querySelector('custom-button');
    button.addEventListener('action', (event) => {
      console.info(`"action" emitted: ${event.detail}`);
    })
    setTimeout(() => button.label = 'Second Value', 3000);
  </script>
</body>

</html>

Спасибо за ответ, вижу, я пропустил важное замечание, у меня нет доступа к исходному коду. Думаю, я хотел бы разместить свой компонент на сайте Angular.

— 06.08.2018 21:56

05.08.2018 04:45