Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 | 4x 4x 4x 4x 4x 4x 4x 4x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 1x 1x 1x 1x 1x 1x 1x | import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
DestroyRef,
Injector,
Input,
OnChanges,
OnInit,
SimpleChange,
ViewChild,
ViewContainerRef,
inject,
} from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { ReplaySubject } from 'rxjs';
import { switchMap } from 'rxjs/operators';
import { CMSFacade } from 'ish-core/facades/cms.facade';
import { ContentPageletView } from 'ish-core/models/content-view/content-view.model';
import { whenTruthy } from 'ish-core/utils/operators';
import { CMSComponentProvider, CMS_COMPONENT } from 'ish-shared/cms/configurations/injection-keys';
import { CMSComponent } from 'ish-shared/cms/models/cms-component/cms-component.model';
/**
* The Content Pagelet Component renders the pagelet for the given 'pageletId'.
* For the rendering an Angular component is used that has to be provided
* for the DefinitionQualifiedName of the pagelet.
*
* @example
* <ish-content-pagelet [pageletId]="pagelet"></ish-content-pagelet>
*/
@Component({
selector: 'ish-content-pagelet',
templateUrl: './content-pagelet.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ContentPageletComponent implements OnChanges, OnInit {
/**
* The Id of the Pagelet that is to be rendered.
*/
@Input() pageletId: string;
@ViewChild('cmsOutlet', { read: ViewContainerRef, static: true }) cmsOutlet: ViewContainerRef;
private pageletId$ = new ReplaySubject<string>(1);
private destroyRef = inject(DestroyRef);
constructor(private injector: Injector, private cmsFacade: CMSFacade, private cdRef: ChangeDetectorRef) {}
ngOnInit() {
this.pageletId$
.pipe(
switchMap(pageletId => this.cmsFacade.pagelet$(pageletId)),
whenTruthy(),
takeUntilDestroyed(this.destroyRef)
)
.subscribe(pagelet => {
this.mapComponent(pagelet);
this.cdRef.markForCheck();
});
}
ngOnChanges() {
this.pageletId$.next(this.pageletId);
}
private mapComponent(pagelet: ContentPageletView) {
const components = this.injector.get<CMSComponentProvider[]>(CMS_COMPONENT, []);
const mappedComponent = components.find(c => c.definitionQualifiedName === pagelet.definitionQualifiedName);
if (mappedComponent) {
const componentRef = this.createComponent(mappedComponent);
this.initializeComponent(componentRef.instance, pagelet);
} else {
console.warn(`did not find mapping for ${pagelet.id} (${pagelet.definitionQualifiedName})`);
}
}
private createComponent(mappedComponent: CMSComponentProvider) {
this.cmsOutlet.clear();
return this.cmsOutlet.createComponent(mappedComponent.class);
}
private initializeComponent(instance: CMSComponent, pagelet: ContentPageletView) {
instance.pagelet = pagelet;
// OnChanges has to be manually invoked on dynamically created components
Iif (instance.ngOnChanges) {
instance.ngOnChanges({ pagelet: new SimpleChange(undefined, pagelet, true) });
}
}
}
|