ngx element

ngxelement

NGXELEMENTは、非緑色のアプリケーションで怠zyな負荷角度成分を可能にします。ライブラリは、属性を渡してロードするコンポーネントを指定できるカスタム要素を登録します。

CMSプラットフォームでAngularを効率的に使用するのに最適な方法です。

Angular Elementsをインストールします

このライブラリは、角度要素に依存します。実行してインストールできます。

 $ ng add @angular/elements

ライブラリのインストール

 $ npm install ngx-element --save

使用法

1）怠zyなロードされたコンポーネントを含むモジュールを構成します

まず、CustomElementComponentプロパティを介してロードする必要がある角度成分を公開します。

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

2）AppModuleの怠zyなコンポーネントマップを定義します

Angular Routerと同様に、コンポーネントセレクターとLazyモジュールのマップを定義します。

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

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

3）怠zyなロードされたコンポーネントを使用します

次のような以下のように、 <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）イベントを聞いてください

Angularコンポーネントによって放出されるイベントを聴くことができます。

@Outputイベントをコンポーネントに追加します。

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

次に、ApproPiate <ngx-element>要素でtagClickイベントにイベントリスナーを追加します。

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

クレジット

Juri StrumpflohnerとNgx-Lazy-Elに感謝します！