ngx element

ngxelement

NGXELEMENT可以在非角度應用中懶惰的角度組件。該庫將註冊一個自定義元素，您可以將屬性傳遞給該元素以指定要加載的組件。

這是一種以有效的方式在CMS平台中使用Angular的好方法。

安裝角元素

該庫取決於角元素。您可以通過運行來安裝它：

 $ ng add @angular/elements

安裝庫

 $ npm install ngx-element --save

用法

1）配置包含懶惰的組件的模塊

首先，揭示應通過CustomElementCompontem屬性加載的角組件。

 ...
@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）使用懶惰的組件

您可以通過在非角度應用程序中的DOM中添加<ngx-element>標籤來加載角度組件，如下所示：

 <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();
...

然後將事件偵聽器添加到適當的<ngx-element>元素上的tagClick事件：

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

學分

感謝Juri Strumpflohner和NGX-Lazy-El！