ngx element

NgxElement

NGXELEMENT позволяет ленировать угловые компоненты на нагрузке в неагулярных приложениях. Библиотека зарегистрирует пользовательский элемент, на который вы можете передать атрибут, чтобы указать, какой компонент вы хотите загрузить.

Это отличный способ эффективно использовать Angular в вашей платформе CMS.

Установите угловые элементы

Эта библиотека зависит от угловых элементов. Вы можете установить его, работая:

 $ ng add @angular/elements

Установка библиотеки

 $ npm install ngx-element --save

Использование

1) Настройка модуля, содержащего ленивый нагруженный компонент

Прежде всего, выставьте угловой компонент, который должен быть загружен с помощью свойства CustomElementEmpentComponent.

 ...
@NgModule({
  declarations: [TalkComponent],
  ...
  exports: [TalkComponent],
  entryComponents: [TalkComponent]
})
export class TalkModule {
  customElementComponent: Type<any> = TalkComponent;
  ...
}

2) Определите карту ленивых компонентов в вашем AppModule

Как и с угловым маршрутизатором, определите карту селектора компонентов и ленивого модуля.

 const lazyConfig = [
  {
    selector: 'talk',
    loadChildren: () => import('./talk/talk.module').then(m => m.TalkModule)
  }
];

@NgModule({
  ...,
  imports: [
    ...,
    NgxElementModule.forRoot(lazyConfig)
  ],
  ...
})
export class AppModule {
  ...
  ngDoBootstrap() {}
}

3) Используйте ленивый нагруженный компонент

Вы можете загрузить свой угловой компонент, добавив теги <ngx-element> в DOM в вашем неангулярном приложении, как следует:

 <ngx-element
  selector="talk"
  data-title="Angular Elements"
  data-description="How to write Angular and get Web Components"
  data-speaker="Bruno">
</ngx-element>

4) Слушать события

Вы можете слушать события, излучаемые угловыми компонентами.

Добавьте событие @Output в свой компонент:

 ...
@Output() tagClick: EventEmitter<string> = new EventEmitter();
...

Затем добавьте слушатель событий в событие tagClick на Appropiate <ngx-element> element:

 const talks = document.querySelector('ngx-element[selector="talk"]');
talks.addEventListener('tagClick', event => {
  const emittedValue = event.detail;
  ...
});

Кредиты

Спасибо Юрису Стрампфлохоне и NGX-Lazy-El!