Make ThemedComponent reproject slots to wrapped component

This commit is contained in:
Yura Bondarenko
2022-05-16 18:10:27 +02:00
committed by Alexandre Vryghem
parent 80670855ff
commit b3060707dd
2 changed files with 13 additions and 4 deletions

View File

@@ -1 +1,5 @@
<ng-template #vcr></ng-template> <ng-template #vcr>
</ng-template>
<div #content>
<ng-content></ng-content>
</div>

View File

@@ -8,7 +8,8 @@ import {
OnDestroy, OnDestroy,
ComponentFactoryResolver, ComponentFactoryResolver,
ChangeDetectorRef, ChangeDetectorRef,
OnChanges OnChanges,
ElementRef
} from '@angular/core'; } from '@angular/core';
import { hasValue, isNotEmpty } from '../empty.util'; import { hasValue, isNotEmpty } from '../empty.util';
import { from as fromPromise, Observable, of as observableOf, Subscription } from 'rxjs'; import { from as fromPromise, Observable, of as observableOf, Subscription } from 'rxjs';
@@ -23,6 +24,7 @@ import { GenericConstructor } from '../../core/shared/generic-constructor';
}) })
export abstract class ThemedComponent<T> implements OnInit, OnDestroy, OnChanges { export abstract class ThemedComponent<T> implements OnInit, OnDestroy, OnChanges {
@ViewChild('vcr', { read: ViewContainerRef }) vcr: ViewContainerRef; @ViewChild('vcr', { read: ViewContainerRef }) vcr: ViewContainerRef;
@ViewChild('content') themedElementContent: ElementRef;
protected compRef: ComponentRef<T>; protected compRef: ComponentRef<T>;
protected lazyLoadSub: Subscription; protected lazyLoadSub: Subscription;
@@ -33,7 +35,7 @@ export abstract class ThemedComponent<T> implements OnInit, OnDestroy, OnChanges
constructor( constructor(
protected resolver: ComponentFactoryResolver, protected resolver: ComponentFactoryResolver,
protected cdr: ChangeDetectorRef, protected cdr: ChangeDetectorRef,
protected themeService: ThemeService protected themeService: ThemeService,
) { ) {
} }
@@ -88,7 +90,10 @@ export abstract class ThemedComponent<T> implements OnInit, OnDestroy, OnChanges
}), }),
).subscribe((constructor: GenericConstructor<T>) => { ).subscribe((constructor: GenericConstructor<T>) => {
const factory = this.resolver.resolveComponentFactory(constructor); const factory = this.resolver.resolveComponentFactory(constructor);
this.compRef = this.vcr.createComponent(factory);
const contentNodes = [[...this.themedElementContent.nativeElement.children].map(node => node)] || undefined;
this.compRef = this.vcr.createComponent(factory, undefined, undefined, contentNodes);
this.connectInputsAndOutputs(); this.connectInputsAndOutputs();
this.cdr.markForCheck(); this.cdr.markForCheck();
}); });