ดาวน์โหลด ngx element - ดาวน์โหลดซอร์สโค้ด ngx element

ngx element

ส่วนประกอบของบุคคลที่สาม

1.0.0

ดาวน์โหลด

ngxelement

NgxElement ช่วยให้สามารถโหลดส่วนประกอบเชิงมุมที่ขี้เกียจในแอปพลิเคชันที่ไม่ใช่แบบแฝง ไลบรารีจะลงทะเบียนองค์ประกอบที่กำหนดเองซึ่งคุณสามารถผ่านแอตทริบิวต์เพื่อระบุองค์ประกอบที่คุณต้องการโหลด

เป็นวิธีที่ยอดเยี่ยมในการใช้ Angular ในแพลตฟอร์ม CMS ของคุณอย่างมีประสิทธิภาพ

ติดตั้งองค์ประกอบเชิงมุม

ห้องสมุดนี้ขึ้นอยู่กับองค์ประกอบเชิงมุม คุณสามารถติดตั้งได้โดยใช้งาน:

 $ 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) ใช้ส่วนประกอบที่โหลดขี้เกียจ

คุณสามารถโหลดส่วนประกอบเชิงมุมของคุณได้โดยการเพิ่มแท็ก <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) ฟังเหตุการณ์

คุณสามารถฟังเหตุการณ์ที่ปล่อยออกมาจากส่วนประกอบเชิงมุม

เพิ่มเหตุการณ์ @Output ลงในส่วนประกอบของคุณ:

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

จากนั้นเพิ่มผู้ฟังเหตุการณ์ในเหตุการณ์ tagClick บนองค์ประกอบ <cropiate <ngx-element> องค์ประกอบ:

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