ngx element

ngxElement

NGXELEMENT를 사용하면 비 균형 응용 분야에서 게으른 부하 각도 구성 요소가 가능합니다. 라이브러리는 속성을 전달하여로드 할 구성 요소를 지정할 수있는 사용자 정의 요소를 등록합니다.

CMS 플랫폼에서 Angular를 효율적으로 사용하는 좋은 방법입니다.

각도 요소를 설치하십시오

이 라이브러리는 각도 요소에 따라 다릅니다. 실행하여 설치할 수 있습니다.

 $ ng add @angular/elements

라이브러리 설치

 $ npm install ngx-element --save

용법

1) 게으른로드 된 구성 요소를 포함하는 모듈을 구성하십시오

우선, CustomElementComponent 속성을 통해로드 해야하는 각도 구성 요소를 노출시킵니다.

 ...
@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) 게으른로드 구성 요소를 사용하십시오

다음과 같이 angular 응용 프로그램에서 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) 이벤트를 듣습니다

각도 구성 요소에 의해 방출되는 이벤트를들을 수 있습니다.

구성 요소에 @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에게 감사합니다!