Ich versuche, eine Komponente in der endgültigen Version 2.0.0 dynamisch zu laden.

Mit RC5 habe ich mit dem folgenden Code geladen:

Erstelle eine Direktive um die Controls zu laden:

import {
  CheckboxComponent, CheckboxListComponent,DatePickerComponent
} from '../components/';

@Directive({
      selector: '[ctrl-factory]'
    })
    export class ControlFactoryDirective implements OnChanges {
      @Input() model: any;

      constructor(private vcRef: ViewContainerRef, private resolver: ComponentResolver) {
      }

      create(cp) {
        this.resolver.resolveComponent(cp)
          .then(factory => {
            const injector = ReflectiveInjector.fromResolvedProviders([], this.vcRef.parentInjector);
            this.vcRef.createComponent(factory, 0, injector, []);
            let ch = this.vcRef.createComponent(factory, 0, injector, []).instance;
            ch.model = this.model;
        });
      }

      ngOnChanges() {
        if (!this.model) return;

        switch (this.model.type) {
          case 'checkbox':
            this.create(CheckboxComponent);
            break;
          case 'checkboxlist':
            this.create(CheckboxListComponent);
            break;
          case 'datepicker':
            this.create(DatePickerComponent);
            break;
          default:
            break;
        }
      }
    }

Dann lud diese Anweisung in meine Seite wie folgt:

<div ctrl-factory *ngFor="let child of page.childrens" [model]="child"></div>

Aber nach dem Update von RC5 auf die endgültige Version 2.0.0 existiert der Resolver nicht mehr und wurde durch den Compiler ersetzt.

Ich habe viele Stellen gefunden, an denen gezeigt wird, wie man es mit verschiedenen Codes lädt, aber all diese sind zu komplex und ich konnte es nicht zum Laufen bringen.

Nimm das zum Beispiel:Wie kann ich eine dynamische Vorlage zum Kompilieren einer dynamischen Komponente mit Angular 2.0 verwenden / erstellen?

Es sieht für dieses Szenario spezifischer aus. Ich muss nur die Komponente laden und einen @Input namens model festlegen.

Eine Sache, als ich versuchte, musste ich dynamisch ein Modul für jede Komponente erstellen und dann die Komponente hinzufügen. Aber dann hatte ich Probleme zu sagen, dass die Komponente in mehr als einem Modul festgelegt wurde, versuchen Sie, an einer Stelle eine nicht funktionierende zu entfernen.

Den größten Teil des gezeigten Codes erhalte ich über diesen Link:http: //blog.lacolaco.net/post/dynamic-component-creation-in-angular-2-rc-5

Und hat ein paar Änderungen vorgenommen.

Aktualisiere

Ich schaffe es, es mit dem folgenden Ansatz zum Laufen zu bringen:

Die Methode create wurde in @ geänder

private create(cp) {
    @NgModule({
      imports: [BrowserModule, ControlsModule],
      declarations: []
    })
    class DynamicModule {}

    this.compiler.compileModuleAndAllComponentsAsync(DynamicModule)
      .then(({componentFactories}) => {
        const compFactory = componentFactories.find(x => x.componentType === cp);
        const injector = ReflectiveInjector.fromResolvedProviders([], this.vcRef.parentInjector);
        const cmpRef = this.vcRef.createComponent(compFactory, 0, injector, []);
        cmpRef.instance.model = this.model;
      });
  }

Die meisten Stellen, die ich gefunden habe, legen fest, dass die Komponente erstellt und auf DynamicModule gesetzt werden soll. Das Problem besteht darin, dass Sie dieselbe Komponente bereits in einem anderen Modul deklarieren, worüber Angular sich beschweren wird. In meinem Fall bestand die Lösung darin, das my ControlsModule zu importieren, in das alle meine Steuerelemente exportiert wurden.