Wie load-Komponente, die dynamisch mit component-name in angular2?

Ich bin derzeit auf der be-Winkel-Komponenten dynamisch in meine Anwendung mit dem folgenden code.

export class WizardTabContentContainer {
  @ViewChild('target', { read: ViewContainerRef }) target: any;
  @Input() TabContent: any | string;
  cmpRef: ComponentRef<any>;
  private isViewInitialized: boolean = false;

  constructor(private componentFactoryResolver: ComponentFactoryResolver,   private compiler: Compiler) {
  }

  updateComponent() {
     if (!this.isViewInitialized) {
       return;
     }
     if (this.cmpRef) {
       this.cmpRef.destroy();
     }
     let factory = this.componentFactoryResolver.resolveComponentFactory(this.TabContent);

     this.cmpRef = this.target.createComponent(factory);
   }
}

Hier resolveComponentFactory Funktion akzeptiert Komponente geben. Meine Frage ist, gibt es eine Möglichkeit, ich kann load-Komponente mit component-name-string e.g ich habe die Komponente definiert als

export class MyComponent{
}

Wie kann ich über Komponente mit component-name string "MyComponent" statt geben?

InformationsquelleAutor Pankaj Kapare | 2016-10-18

angular

32

Vielleicht wird dies funktionieren
```
import { Type } from '@angular/core';

@Input() comp: string;
...
const factories = Array.from(this.resolver['_factories'].keys());
const factoryClass = <Type<any>>factories.find((x: any) => x.name === this.comp);
const factory = this.resolver.resolveComponentFactory(factoryClass);
const compRef = this.vcRef.createComponent(factory);
```
wo this.comp ist ein string-name der Komponente, wie "MyComponent"

Plunker Beispiel

Zu tun, es funktioniert mit Verkleinerung sehen
- ng2 - dynamisch erstellen einer Komponente basierend auf einer Vorlage
- Ihre werfen Fehler auf x.name. Eigenschaft 'name' existiert nicht auf den Typ '{}'.
- Ich aktualisierte Antwort
- Danke. Ich beschloss, dass ich Fehler im obigen Kommentar mit den Fabriken.find(x=>x['name'] === diese.comp); aber jetzt immer Fehler Argument vom Typ '{}' wird nicht zuweisbare parameter von Typ 'Typ<{}>'. Eigenschaft 'anwenden', fehlt in den Typ '{}'. in Zeile const Fabrik = diese.resolver.resolveComponentFactory(factoryClass);
- Aktualisiert. Vergessen Sie nicht importieren Type
- Ich fügte hinzu, import { Typ } aus '@eckig/core', und bin noch immer " Argument vom Typ '{}' wird nicht zuweisbare parameter von Typ 'Typ<{}> Eigentum 'gelten' fehlt in Typ "{} " - Fehler. Alle anderen Gedanken zu diesem Thema bitte?
- Ich fand es heraus. Ich musste hinzufügen var factoryClass = <Typ<alle>>Fabriken.find((x: any) => x.name === diese.comp); Die Plunker Beispiel ist das anders. Danke für diesen Ansatz!!!
- In der Dokumentation " _factories` ist nicht erwähnt, um alle Komponenten. Ich sehe in den doc - ( github.com/angular/angular/blob/... ) ist es als private deklariert wurde. Sollen wir es verwenden? Ich meine, wenn es änderungen in zukünftigen Versionen dann werden wir nicht in der Lage sein, darüber zu wissen.
- Sie sollten wissen, über alle Ihre Fabriken. - Objekt verwenden, als Karte. Benutzen keine privat-api
- Hier this.resolver['_factories'], die _factories Daten Mitglied ist private. Bitte korrigieren Sie mich, wenn ich falsch bin.
- Vielen Dank für diese. So in der Nähe zu arbeiten... aber aus irgendeinem Grund für eines meiner Bauteile - erklärt in ngModule etc, genau, wie alle anderen, wirft den Fehler ERROR Error: No provider for name!
- Dies scheint nicht zu funktionieren, wenn Sie --prod. Irgendwelche Ideen, warum? Alle factory-Namen verschleiert wurden und die alle "n", daher nie der Suche nach einem passenden Typ
- Überprüfen Sie heraus diese Antwort stackoverflow.com/questions/40528592/...
- Ich Stimme mit @HiteshKumar, dass dies eine Verwendung von kantigem inneren. Ich habe eine ähnliche Frage/Antwort hier stackoverflow.com/questions/40222579/... Aber diese Antwort ist technisch besser funktioniert. Leider jetzt habe ich noch keinen Weg gefunden, sauber zu machen 🙁
- Hast du das überprüfen? stackoverflow.com/questions/40528592/...
- das ist genau das, was meine verlinkte Antwort hat, nur leicht unterschiedliche Ausführung. Es ist das, was ich hoffte, zu vermeiden. 😛 Auch, es verwendet immer noch den Winkel-2 interne Objekt _factories
InformationsquelleAutor yurzui
0

Es ist auch möglich, den Zugriff durch import:

someComponentLocation.ts - enthält enum der möglichen Komponenten:
```
export * from './someComponent1.component'
export * from './someComponent2.component'
export * from './someComponent3.component';
```
Importeur Komponente:
```
import * as possibleComponents from './someComponentLocation'
...

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

constructor(private resolver: ComponentFactoryResolver){}
```
dann kann man erstellen Sie eine Instanz der Komponente, zum Beispiel:
```
let inputComponent = possibleComponents[componentStringName];
if (inputComponent) {
    let inputs = {model: model};
    let inputProviders = Object.keys(inputs).map((inputName) => { return { provide: inputName, useValue: inputs[inputName] }; });
    let resolvedInputs = ReflectiveInjector.resolve(inputProviders);
    let injector: ReflectiveInjector = ReflectiveInjector.fromResolvedProviders(resolvedInputs, this.dynamicInsert.parentInjector);
    let factory = this.resolver.resolveComponentFactory(inputComponent as any);
    let component = factory.create(injector);
    this.dynamicInsert.insert(component.hostView);
}
```
beachten Sie, dass die Komponente in @NgModule entryComponents
- also, wie bekommen wir, die import-dynamisch? Ich glaube, dass ist nicht wirklich praktisch ist, wenn man nur mit einem string der den Namen der Komponente.
- Mehr Infos dazu? was ist this.dynamicInsert variable? Können Sie ein minimum funktionierende Beispiel-code?
- du hast Recht. Es ist nicht wirklich dynamische version. Aber manchmal können Sie festlegen, Reihe von bekannten Komponenten durch statische array.
- Ich habe aktualisiert die post wenig. dynamicInsert ist typisches element <ng-template #dynamicInsert></ng-template>
- danke für die Antwort. und wie würden Sie Sie zuordnen ein-und Ausgänge für eine Komponente, die geladen wird, wie das?
- sorry für die Verspätung, können Sie leicht Zugriff auf erstellte component instance: component.Instanz.yourCustomInput = Wert; versuchen Sie das Debuggen in chrome
- Kein problem, vielen Dank für die Beantwortung.
InformationsquelleAutor Petr Špaček
0

https://stackblitz.com/edit/angular-hzx94e

Hier ist, wie können Sie die Last eckige Komponenten von string. Es funktioniert auch für prod baut.

Zusätzlich können Sie injizieren von Daten in jede der dynamisch belasteten Komponenten.

InformationsquelleAutor Jeremy wall

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.