Ich erstelle eine wiederverwendbare Datentabelle mit ngx-datatable und möchte, dass dynamische Komponenten innerhalb der Zeilendetails gerendert werden. Die datierbare Komponente empfängt eine Komponentenklasse als Argument von einem übergeordneten Modul, und ich verwende ComponentFactory, um Component zu erstellen. Ich kann sehen, dass der Konstruktor und die onInit-Methoden für die dynamische Komponente ausgeführt werden, aber nicht an das DOM angehängt werden.
So sieht das datierbare HTML für das Zeilendetail aus:
<!-- [Row Detail Template] -->
<ngx-datatable-row-detail rowHeight="100" #myDetailRow (toggle)="onDetailToggle($event)">
<ng-template let-row="row" #dynamicPlaceholder let-expanded="expanded" ngx-datatable-row-detail-template>
</ng-template>
</ngx-datatable-row-detail>
<!-- [/Row Detail Template] -->
Und so sieht meine .ts-Datei aus:
@ViewChild('myDetailRow', {static: true, read: ViewContainerRef}) myDetailRow: ViewContainerRef;
@ViewChild('dynamicPlaceholder', {static: true, read: ViewContainerRef}) dynamicPlaceholder: ViewContainerRef;
renderDynamicComponent(component) {
var componentFactory = this.componentFactoryResolver.resolveComponentFactory(component);
var hostViewConRef1 = this.myDetailRow;
var hostViewConRef2 = this.dynamicPlaceholder;
hostViewConRef1.createComponent(componentFactory);
hostViewConRef2.createComponent(componentFactory);
}
Ein weiterer Punkt ist, dass wenn meine #dynamicPlaceholder
ng-Vorlage außerhalb von ngx-datatable platziert wird, sie funktioniert und das dynamische Modul gerendert und angezeigt wird.
angular
ngx-datatable
Raghav Kanwal
quelle
quelle
<ng-content>
Tag zum Rendern verschachtelter Markups.Antworten:
Wir können eine Komponente zur
<ng-template>
Laufzeit nicht in eine Vorlage ( ) rendern,createComponent
da afaik-Vorlagen zur Kompilierungszeit von Angular verarbeitet werden. Wir brauchen also eine Lösung, die zur Kompilierungszeit funktioniert.
Lösung mit Nachteilen
ng-content
kann uns hier helfen:Wir können dann alles, was wir wollen, an die Detailansicht übergeben:
Es gibt jedoch ein Problem: Wir können nicht verwenden,
ng-content
wenn wir auf die aktuelle Zeile in der übergebenen Vorlage zugreifen möchten.Lösung
Aber
ngx-datatable
hat uns gedeckt. Wir können eine Vorlage an diengx-datatable-row-detail
Richtlinie übergeben:Die Vorlage kann dann von jeder externen Komponente über eine
@Input
Variable übergeben werden:Schauen Sie sich den Stackblitz an , in dem ich eine
my-table
Komponente als poc geschrieben habe.quelle
Stackblitz
Bearbeiten: Ich habe mit der
ngx-datatable
Quelle herumgespielt. Ein trauriger Teil davonngx-datatable-row-detail
ist keine Komponente, sondern eine Direktive und sie ist nicht an DOM gebunden. Es hat also keineViewContainer
Referenz. Dies macht das Einspritzen von Elementen etwas schwierig. Sie können Vorlagen in Ihrer Komponente definieren,TemplateRef
s verwenden und sie dort zuweisen, wo Sie Ihre Komponente rendern.quelle
el.setAttribute is not a function
Fehlermeldung für die componentFactory.create-Methode angezeigt. Irgendeine Idee, warum das passieren könnte? this.dynamicPlaceholder.elementRef.nativeElement gibt einen Kommentar zurück. Könnte das sein?