Chargement de composants dynamiques à certains emplacements dans Angular2

Question

Je développe une nouvelle application dans Angular2 et j'ai besoin de charger dynamiquement 8 contrôles (grille, diagrammes, calendriers e.ct) sur mon application. Je suis capable de charger tous ces contrôles dynamiquement. Mais mon exigence est de les afficher de façon particulière comme deux contrôles par rangée que je suis incapable de faire. Actuellement, tous les contrôles sont chargés mais tous dans une colonne l'un en dessous de l'autre.

Le code ci-dessous montre comment j'ai obtenu la liste des gadgets et comment je l'ajoute au composant en utilisant viewContainerRef. Mais je ne pouvais pas contrôler où ces composants peuvent être affichés.

for (let gadget of gadgets) { 
         this.userService.getGadgetsData(gadget.Id).subscribe(gadgetsData => { 

          switch (gadget.Name) { 
           case "PieChart": 

            this.donughtChartData = gadgetsData.Data.Issues.map((v: any) => ({ 
             category: v.Values[0].Value, 
             value: v.Values[2].Value, 
            })); 

            const factory = this.componentFactoryResolver.resolveComponentFactory(DonutComponent); 
            const ref = this.viewContainerRef.createComponent(factory); 
            ref.instance.donutchartData = this.donughtChartData; 
            ref.changeDetectorRef.detectChanges(); 

            break; 

Answer 1

D'après ce que vous avez dit, je pense que cela: vous devez afficher le contenu mis dans votre modèle/fichier .html. votre tapuscrit fonctionnera bien mais pas où voir. utilisez un div ou quelque chose dans votre modèle et affichez ce résultat.

Une fois affiché, vous pouvez donner à ce div un nom de classe de n'importe quelle classe ex "class = 'flex-box' et appliquer les styles ci-dessous, les aligner automatiquement en colonnes et être très facile à comprendre. lier une lecture

vous souhaitez utiliser flex pour atteindre les colonnes

exemple ici.

`ul{ 
    list-style-type: none; 
    display: flex; 
    flex-wrap: wrap; 
    li{ 
     flex: 6 1 ; //the number refer to how much/fast the item will grow/shrink 
     .form-control-item {//...some css} 
     } 
    }` 

Si votre question se maintenant en « Comment puis-je utiliser le modèle » alors vous devez regarder à d'autres débordement Q de la pile comme cela a été un Swered plusieurs fois. vous pouvez également consulter la documentation angulaire, et prendre la Hero's Tutorial

https://css-tricks.com/snippets/css/a-guide-to-flexbox/