ngx element

NGXElement

NGXElement memungkinkan komponen sudut beban malas dalam aplikasi non-sudut. Perpustakaan akan mendaftarkan elemen khusus yang dapat Anda lewati atribut untuk menentukan komponen apa yang ingin Anda muat.

Ini cara yang bagus untuk menggunakan sudut di platform CMS Anda dengan cara yang efisien.

Pasang elemen sudut

Perpustakaan ini tergantung pada elemen sudut. Anda dapat menginstalnya dengan menjalankan:

 $ ng add @angular/elements

Menginstal perpustakaan

 $ npm install ngx-element --save

Penggunaan

1) Konfigurasikan modul yang berisi komponen malas yang dimuat

Pertama -tama, paparkan komponen sudut yang harus dimuat melalui properti CustomElementComponent.

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

2) Tentukan peta komponen malas di appmodule Anda

Sama seperti dengan router sudut, tentukan peta pemilih komponen dan modul malas.

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

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

3) Gunakan komponen malas yang dimuat

Anda dapat memuat komponen sudut Anda dengan menambahkan tag <ngx-element> ke DOM di aplikasi non-sudut Anda seperti berikut:

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

4) Dengarkan acara

Anda dapat mendengarkan acara yang dipancarkan oleh komponen sudut.

Tambahkan acara @Output ke komponen Anda:

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

Kemudian tambahkan pendengar acara ke acara tagClick di elemen <ngx-element> APPROPIATE:

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

Kredit

Terima kasih kepada Juri Strumpflohn dan NGX-LAZY-EL!