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！