تنزيل 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 في تطبيقك غير angular مثل التالي:

 <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 على العنصر Advropiate <ngx-element> :

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