Changer dynamiquement le modèle Angulaire de 4 éléments

À l'aide Angulaire 4.1, je suis en train de modifier dynamiquement un module de ce type de modèle avant de le module de rendu. Est-ce possible?

Nous sommes d'amorçage d'un nombre inconnu de composants sur la page (à partir d'une liste des types de composants), et la page peut contenir plusieurs composants du même type. J'ai trouvé un moyen de donner à chacun de ces composants un autre sélecteur de sorte qu'ils peuvent être rendus séparément (même si elles sont de même type), mais j'ai aussi besoin de donner à chacun un modèle différent. Le modèle doit être à l'intérieur HTML de l'élément sélectionné.

Voici le code:

import { Component, NgModule, Inject, ApplicationRef, ComponentFactoryResolver, OpaqueToken, Type } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MyNavComponent } from './MyNav.component';
import { MyRotatorComponent } from './MyRotator.component';
import { MySignUpComponent } from './MySignUp.component';

export const BOOTSTRAP_COMPONENTS_TOKEN = new OpaqueToken('bootstrap_components');

@NgModule({
    imports: [BrowserModule],
    declarations: [
        MyNavComponent,
        MyRotatorComponent,
        MySignUpComponent
    ],
    entryComponents: [
        MyNavComponent,
        MyRotatorComponent,
        MySignUpComponent
    ],
    providers: [
        {
            provide: BOOTSTRAP_COMPONENTS_TOKEN,
            useValue: [
                { type: MyNavComponent },
                { type: MyRotatorComponent },
                { type: MySignUpComponent }
            ]
        },
    ]
})
export class AppModule {
    constructor(
        private resolver: ComponentFactoryResolver,
        @Inject(BOOTSTRAP_COMPONENTS_TOKEN) private components: [Component],
    ) { }
    ngDoBootstrap(appRef: ApplicationRef) {
        console.log(this.components);
        this.components.forEach((componentDef: { type: Type<any>, selector: string }) => {
            const factory = this.resolver.resolveComponentFactory(componentDef.type);
            let selector = factory.selector;
            let nodes = document.querySelectorAll(selector);
            for (let i = 0; i < nodes.length; i++) {
                let node = nodes[i];
                (<any>factory).factory.selector = node;

                //The next line doesn't work... how can I dynamically set the template?
                (<any>factory).factory.template = node.innerHTML;

                appRef.bootstrap(factory);
            }
        });
    }
}

Comme indiqué près de la fin de la code ci-dessus, (<any>factory).factory.template = node.innerHTML; ne fonctionne pas. J'ai aussi essayé de modifier les métadonnées pour le type, mais cela ne fonctionne pas, soit.

Est ce que je suis en train de réaliser possible par un autre moyen? Si non, est-ce la peine de soumettre une demande de fonctionnalité?

(Note: le code ci-dessus est basé en partie sur le code des autres à https://github.com/angular/angular/issues/7136.)

Mise à jour:

Je me demandais si dans une future mise à jour de Anguleuses, je vais être en mesure d'obtenir le même résultat en définissant le modèle de <ng-content></ng-content> pour inclure le innerHTML de l'élément sélectionné. Ce n'est pas possible maintenant avec bootstrap composants, mais basé sur ce question sur Git, j'ai l'espoir qu'il sera bientôt.

  • Êtes-vous à l'aide de AOT? Plus précisément, vous allez navire @angular/compiler à la production?
  • Je suis juste un blocage de la nouvelle Angulaire et n'avez pas défini de AOT compilation, mais je pense qu'à l'aide AOT idéal serait finalement. Est-ce à changer quoi que ce soit? Serais-je capable d'en sortir si je coincé avec JIT?
  • Je ne peut pas avoir à comprendre tous les détails de votre question, mais je pense que vous pourriez obtenir ce que vous voulez avec l'utilisation de *ngFor et *ngSwitch structurels de la directive. avec le ngFor, vous boucle pour le nombre total de composants dont vous avez besoin. avec le ngSwitch, vous pouvez alors choisir librement entre l'ensemble des composantes en fonction de certaines variables.
InformationsquelleAutor Kirk Grover | 2017-05-30
  1. 5

    Vous ne pouvez pas définir un modèle pour un composant de l'usine après qu'il a été créé. Angulaire compilateur analyse des modèles lors de la génération d'une usine et crée une classe d'affichage pour chaque composant. Après que le composant de l'usine et de son point de vue de classe, vous ne pouvez plus la modifier. Dans votre exemple, vous utilisez ComponentFactoryResolver

    const factory = this.resolver.resolveComponentFactory(componentDef.type);

    qui renvoie déjà créé usine.

    La seule option est de changer le modèle avant de le compilateur génère des usines. Mais je ne pense pas que c'est possible. Vous aurez probablement à prendre un coup d'oeil à la génération dynamique de composants.

    Lire Voici ce que vous devez savoir à propos de la dynamique des composants Angulaire pour plus d'informations.

    • Merci pour l'explication et de l'article utile, @Maximus. Ce que tu dis a du sens. Je vais accrocher à l'espoir d'un tout qu'il y a une autre façon d'atteindre ce but avant de marquer votre solution comme la réponse et la fermeture de la porte sur l'idée de bootstrap composants ayant des modèles dynamiques.
    • Bien sûr, pas de problème. Les modèles doivent être compilé par le compilateur de toute façon. Si vous avez un modèle compilé, vous pouvez ensuite utiliser à des fins différentes. Vous pouvez obtenir compilé les modèles avec la ng-template directive. Mais je ne suis pas sûr que cette solution fonctionne dans votre cas.
    • Tout comme un point de clarification - disons que j'ai un component.ts fichier et que vous souhaitez avoir plusieurs point de vue différent des modèles pour elle (c'est à dire component.1.html et component.2.html) - ce que vous dites, c'est qu'il n'est pas possible par programmation choisir la vue modèle à utiliser?
    • Vous aurez besoin de créer dynamiquement une classe de composant. Lire l'article que j'ai référencé
    InformationsquelleAutor Maxim Koretskyi