Kompilieren und Rendern vorhandener Komponenten dynamisch mit Angular 5

Question

Ich habe eine eckige 1.x-App, die mit einem dynamischen Layout arbeitet. Die App erhält ein Layout JSON mit den Metadaten des Bildschirms und generiert einfach kompilierte Komponenten im laufenden Betrieb und erstellt einen Bildschirm.

Der entsprechende „wichtigen Code“ sieht wie folgt aus:

const element = this.$compile(`<${this.control.type} control="control" data="data"></${this.control.type}>`)(scope); 
this.$element.replaceWith(element); 

Nun, ich versuche, diese 5 bis Eckige zu wandern und ich habe verstanden, dass Angular 5 die DOM-Manipulation fallen gelassen und die kompilieren $ Funktionalität .

Ich habe rundherum gesucht und gefunden Lösungen, die wissen, wie man dynamisches HTML (zB {{1 + 1}}) und andere veraltete Sachen (vor Angular 5), aber nicht zum Rendern passen dynamisch gemachte Komponenten (und handhabt ihre inneren Bindungen).

Gibt es eine Möglichkeit, diese Art von Funktionalität erreichen kann

Answer 1

Dies ist der Weg, um eine Komponente von Ihrem Selbst wie AngularJS zu erstellen: (Vergessen Sie nicht, es zu zerstören, rufen Sie zerstören() auf der componentRef zu! tun dies)

Geordnete Komponente:

@ViewChild('componentHolder', { read: ViewContainerRef }) componentHolder: ViewContainerRef; 

constructor(private componentFactoryResolver: ComponentFactoryResolver) { } 
public createComponent(): void { 
      const componentFactory = this.componentFactoryResolver.resolveComponentFactory(MyComponent); 
      const componentRef = this.componentHolder.createComponent(componentFactory); 
} 

geordnete Komponente HTML:

<button (click)="createComponent()">Add New MyComponent below</button> 
<div #componentHolder ></div> 

Fügen Sie die MyComponent im NgModule:

... 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    RouterModule.forRoot(appRoutes), 
    ], 
    entryComponents: [ 
    MyComponent 
    ],...