ngx element

Ngxelement

NGXElement ermöglicht es, faule Lastwinkelkomponenten in nicht-langularen Anwendungen zu faulen. Die Bibliothek registriert ein benutzerdefiniertes Element, an das Sie ein Attribut übergeben können, um anzugeben, welche Komponente Sie laden möchten.

Dies ist eine großartige Möglichkeit, Angular in Ihrer CMS -Plattform effizient zu verwenden.

Winkelelemente einbauen

Diese Bibliothek hängt von Winkelelementen ab. Sie können es installieren, indem Sie ausgeführt werden:

 $ ng add @angular/elements

Installation der Bibliothek

 $ npm install ngx-element --save

Verwendung

1) Konfigurieren Sie das Modul, das die faul geladene Komponente enthält

Entdecken Sie zunächst die Winkelkomponente, die über eine Eigenschaft CustomElement Component geladen werden sollte.

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

2) Definieren Sie die faule Komponentenkarte in Ihrer AppModule

Definieren Sie genau wie beim Angular Router die Karte des Komponentenauswahl und des faulen Moduls.

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

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

3) Verwenden Sie die faul geladene Komponente

Sie können Ihre Winkelkomponente laden, indem Sie dem DOM ein <ngx-element> -Tag in Ihre nichtwinkelige Anwendung hinzufügen, wie folgt:

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

4) Hören Sie sich Ereignisse an

Sie können sich Ereignisse anhören, die von Winkelkomponenten emittiert werden.

Fügen Sie Ihrer Komponente ein @Output -Ereignis hinzu:

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

Fügen Sie dann einen Ereignishörer zum tagClick -Ereignis auf dem entsprechenden <ngx-element> -Element hinzu:

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

Credits

Vielen Dank an Juri Strumpflohner und Ngx-Lazy-El!