Angular - Création dynamique de nested components

Bonjour,

il y a quelques années, j’ai créé un site web dans lequel il est possible de créer des exercices de type question/réponse, texte à trous ou choix multiples. Pour les deux derniers types d’exercice, le tout est enregistré dans une base de données au format texte, sous la forme suivante :

Le lapin mange des !!!12345!!! et vit dans un !!!45678!!!.

Ici, le pattern !!!nnnnn!!! représente une "question", soit de type input text, soit un dropdown avec des choix multiples. Ainsi, je peux les insérer n’importe où dans un texte et ça donne des exercices assez dynamiques.

Ce que je faisais jusqu’à maintenant, c’est qu’au moyen de Django, je générais du HTML au niveau serveur et je retournais l’input ou le dropdown correspondant directement, ce qui donnerait ici pour l’exemple :

<p>
    Le lapin mange des 
        <select id="12345">
            <option value="carottes">carottes</option>
            <option value="bananes">bananes</option>
        </select>
    et vit dans un <input type="text" id="45678">.
</p>

Ensuite, la valeur donnée par l’utilisateur est corrigée via une requête AJAX et le tour est joué.

Actuellement, j’aimerais porter le site sur Angular et je me demande comment faire. Je pourrais y aller avec du [innerHTML] et le pipe "safeHtml", mais je doute que ce soit la bonne manière de faire. Si quelqu’un peut me conseiller sur la voie à suivre, ce serait sympa, là je ne vois pas. Merci d’avoir lu ma question !

Hello!

La bonne méthode avec angular c’est de faire un appel de type API qui va récupérer les données (au format JSON par exemple).

Ensuite tu fais un composant et tu lui envoies les données en options.

Si tu veux générer le HTML côté back c’est pas trop dans les façons de faire d’angular, du coup limite tu peux faire un document.getElementById('foo').innerHTML = ''. Après oui tu as la méthode <div [innerHTML]="taVariable"></div>, c’est pas beaucoup mieux mais au moins tu passes par angular.

Hello, merci de ta réponse !

C’est ok pour moi pour récupérer les données au format JSON avec un service. Par contre, je dois parser le texte de mon exercice et idéalement, remplacer mes "questions" comme !!!12345!!! par un component <question questionId="12345"></question> ou un truc comme ça. C’est cette partie-là sur laquelle je bloque, sur comment faire ça proprement. Est-ce qu’il y a une autre méthode que le innerHTML ?

En fait du coup ton select de réponse devient un composant:

<p>
    Le lapin mange des 
        <answers [data]="answers" />
    et vit dans un <input type="text" id="45678">.
</p>

Un truc comme ça je pense. Pour ce qui est de gérer le remplacement ma foi je pense qu’il faut utiliser la chaîne de caractère d’input et faire le travail manuellement, ensuite utiliser un ng-template probablement.

Désolé je vais avoir du mal à plus t’aider ça fait un bail que j’ai pas trouché à Angular .

Je te remercie pour tes réponses Si quelqu’un a des idées sur la meilleure manière de procéder je suis preneur :).

Hello, le problème principal était qu’à partir du moment où j’affichais ma string dans mon template html Angular, je n’ai pas trouvé de moyen simple de transformer des parties en composants.

Après avoir posté la même question sur Stackoverflow, un utilisateur m’a conseillé de split mes questions en "morceaux" dans la bdd. Comme je ne peux pas trop toucher à la base, j’ai modifié mon api pour qu’elle retourne les questions sous cette forme, découpée :

[
"Le lapin mange des ",
"!!!12345!!!",
" et vit dans un ",
"!!!45678!!!",
".",
]

Du coup, au moment de render la question dans mon composant, si le "morceau" en question match avec une regex au format "!!!1234!!!", j’affiche un composant <question> à la place, avec un ngIf, pour que ça rende ceci :

Le lapin mange des <question [questionId]="12345"</question> et vit dans un <question [questionId]="45678"</question>.

Puis c’est le composant <question> qui s’occupe du chargement, de l’affichage puis de la correction de la question.

@Nek, merci encore pour ton aide !