So laden Sie dynamisch eine Komponente mit einer spezifischen TemplateUrl in Angular

Question

Ich versuche, einen Editor zu erstellen, der auf benutzerdefinierten HTML-Seiten funktioniert. Also muss ich meinen Angular Custom HTML-Code laden.

Ich bin verzweifelt auf der Suche nach einer Möglichkeit, eine Komponente mit einem anderen TemplateUrl jedes Mal zu laden. Ich habe versucht, ComponentFactoryResolver oder ngComponentOutlet aber vergeblich zu betrachten.

Ich habe auch versucht, es mit innerHtml zu tun, aber meine benutzerdefinierte Code darin wurde nicht von Angular kompiliert, so dass bedeutet, dass keine Anweisung würde nicht gebunden werden.

Hat jemand eine Lösung?

Ich verwende die neueste Version von Angular (4).

Answer 1

Ok, ich habe es geschafft. Alles scheint gut zu funktionieren.

Also verwende ich compileModuleAndAllComponentsAsync (wie es hier gemacht wird: https://github.com/patrikx3/angular-compile).

Und um meine Komponenten und Direktiven in den kompilierten Elementen bindbar zu machen, habe ich sie einfach in der declarations der NgModule erstellt, um meine Elemente zu kompilieren.

private async createFactory(opts: CompileOptions) { 
    const cacheKey = opts.template; 

    if (Object.keys(cache).indexOf(cacheKey) > -1) { 
    return cache[cacheKey]; 
    } 
    cache[cacheKey] = new Promise(async(resolve) => { 
    @Component({ 
     template: opts.template 
    }) 
    class TemplateComponent { 
     context: any 
    } 
    @NgModule({ 
     imports: opts.imports, 
     declarations: [ 
      TemplateComponent 
      // <== Insert your directives and components here 
     ] 
    }) 
    class TemplateModule { 
    } 
    const component = await this.compiler.compileModuleAndAllComponentsAsync(TemplateModule); 
    const factory = component.componentFactories.find((comp) => 
     comp.componentType === TemplateComponent 
    ); 
    if (opts.onCompiled) { 
     opts.onCompiled(component); 
    } 
    cache[cacheKey] = factory; 

    resolve(factory); 
    }) 
    return cache[cacheKey]; 
} 

Vielen Dank an alle!

Answer 2

Es gibt einen schönen Artikel über Winkel Website dazu:

https://angular.io/docs/ts/latest/cookbook/dynamic-component-loader.html

nur, dass alles für die neue Deklaration der Komponente gleich bleiben, nur müssen Sie einen zusätzlichen Eintrag in entryComponent machen für jeden neue Komponente in der gleichen Moduldatei hinzugefügt, in dem die neue Komponente deklariert wird:

entryComponents: [ HeroJobAdComponent, HeroProfileComponent ],

und dann mit ComponentFactoryResolver Sie können dynamicall y lade diese Komponente. Bitte lassen Sie mich wissen, wenn Sie weitere Hilfe benötigen.