Chargement Dynamique des modèles au sein d'un seul composant à l'aide Angulaire 4
Mon exigence est de créer un composant qui a 2 ou plus de modèles html, où chaque modèle html a moins de 20 contrôles et basée sur quelques-unes des conditions de la charge que modèle spécifique.
Note: j'ai choisi 3 modèles différents car les contrôles varient en fonction de la templateType où que seul fichier ts que les entrées et logique pour la conduite d'obtenir et d'enregistrer des valeurs dans le modèle reste le même. J'ai donc décidé d'aller avec 3 modèles et un fichier ts comme un seul élément.
//sub.component.ts
@Component({
selector: 'sub-component',
template: `
<div [ngSwitch]="templateType">
<ng-template *ngSwitchCase="'1'"> ${require('./sub1.component.html')} </template>
<ng-template *ngSwitchCase="'2'"> ${require('./sub2.component.html')} </template>
<ng-template *ngSwitchCase="'3'"> ${require('./sub3.component.html')} </template>
<ng-template ngSwitchDefault> ${require('./sub1.component.html')} </template>
</div>
`
})
J'ai essayé ci-dessus alternative car il apparaît comme une solution simple pour obtenir le comportement, mais la compilation échoue avec ne peut pas trouver l'exigent. Dans AngularJS, nous avons ng-Inclure pour remplir n'importe quel modèle, mais il semble ng-modèle ne prend pas en charge pour charger le contenu html externe.
S'il vous plaît ne pas marquer ce que les doublons comme il semble que de nombreuses requêtes similaires à cela, mais la plupart des solutions sont obsolètes ou sans objet Angulaire 4. Veuillez indiquer une alternative au lieu de fixer différents liens.
Cette answer sera également vous aider à
Salut, @BVS Avez-vous aucune solution spécifique pour cela? Je suis également à la même exigence.
Non, je l'ai fait avec les quatre éléments.
OriginalL'auteur BVS | 2017-06-29
Vous devez vous connecter pour publier un commentaire.
Je sais que cette question est vieux, mais j'espère que cela aide les gens qui tentent des choses similaires.
Le malheureux chose à propos de ce que vous voulez, c'est la façon la plus simple de le faire est de simplement faire de chaque modèle de sa propre composante. Sinon, vous avez d'injecter et de nettoyer le code HTML. Ils ont enlevé ng-inclure et des capacités similaires en raison des risques pour la sécurité de l'injection de l'onu-aseptisé HTML. Sa ne serait pas trop d'un P. I. T. si vous n'avez pas spécifiquement l'importation et de déclarer tous les composants de votre module, mais hélas...
Vous pouvez créer une directive simple qui vous permettra d'obtenir templateRefs, et ensuite d'interroger des éléments sur votre page qui ont ces directives, obtenir le modèle de ref, et de les insérer ailleurs. Ce serait au moins vous permettre de garder tous les modèles dans un fichier séparé. J'ai l'habitude de mettre 3 ou 4 modèles dans une composante distincte et de les inclure dans la composante qui veut rendre avec . Je vais décrire comment le faire.
Directive pour obtenir modèle réf
Ensuite, pour les modèles, de créer un super simple composant qui les a tous
Importer tous les nouveaux composants dans votre module, puis de les inclure à l'intérieur de votre composante principale qui rend les modèles
J'ai l'habitude de le faire avec ng-contenu de façon claire dans le composant parent que cette composante fait référence à un autre de ses modèles.
Par exemple, dans le parent..
Puis dans le sous-composant
Vous pouvez voir que c'est ridiculement compliqué pour ce que vous essayez de faire. Il serait plus facile de les créer en tant que composants séparés, et d'utiliser le ngSwitchCase à choisir le bon. L'avantage de la méthode que j'ai décrite ci-dessus est qu'il vous permet de garder vos modèles où vous voulez vraiment, et vous pourriez inclure 100 dans le même composant externe (qui est vraiment pas plus que le strict minimum décorées composant avec un modèle) si vous le vouliez, ou de les déplacer à un service, ou quoi que ce soit.
Voir ici pour un exemple de la façon d'utiliser le compilateur - https://plnkr.co/edit/fdP9Oc?p=info
Encore assez compliqué...
Si vous stockez le modèle comme une propriété de la classe, vous pouvez le changer plus tard en tant que de besoin. Il suffit d'ajouter un modèle de ref importer...
et puis créer une propriété
Puis, plus tard, vous pouvez passer avec l'un de vos querylist et de créer de la embeddedview de nouveau l'aide de l'affichage du conteneur méthodes.
Angulaire 2 /4 fait certaines choses plus faciles... et fait certaines choses waaaaaay plus difficile. Mais je suppose que dans ce cas, c'est au nom de la sécurité.
u l'esprit de partage comment vous avez fait cela à partir d'un service? Je suis un peu perdu
J'ai utilisé Rxjs Sujet<TemplateRef<aucun>> dans le un service similaire à la documentation: angulaire.io/guide/...
Utilisation ngAfterViewInit cycle de vie de l'hameçon dans le composant où vous stockez tous les modèles de pousser les composants pour le service. Je préfère utiliser des variables locales au lieu de directives, juste pour garder les choses simples. Donc <ng-tempalate #myTemplate> dans le composant html, puis @ViewChild('myTemplate', { lire: TemplateRef }) modèle: TemplateRef<aucun> dans le composant.ts, puis de l'envoyer au service dans ngAfterViewInit. Si vous avez besoin d'exemple supplémentaire, veuillez vous poser une autre question et je répondrai.
votre plunker ne fonctionne pas pouvez-vous donner l'exemple en violon
OriginalL'auteur diopside
Je suis en train d'essayer de comprendre cela que nous parlons, et quand je suis tombé sur la réponse ci-dessus, il m'a donné une idée que je vais essayer. J'espère que je vais avoir un certain succès avec elle et être en mesure de mettre à jour cette réponse avec quelque chose de plus concret.
Je suis toujours en train de travailler sur mes questionnaires et j'ai des questions qui sont des questions à choix multiples avec formulé des réponses, des questions à choix multiples avec une "échelle de 1 à 10" type de mécanisme, puis de certaines des questions qui nécessitent une réponse le texte.
Je pense faire un
component
et de l'envelopper chaque modèle dans unngIf
condition qui se connecte à une variable dans la classe qui les données seront transmises en peut déclencher la templeate.De sorte que les données peuvent ressembler à quelque chose comme ceci
Puis dans la classe de composant, vous pouvez avoir quelque chose comme ceci
puis le modèle de ce composant ont quelque chose comme
Puis dans la principale composante du modèle, vous pouvez faire quelque chose comme
Tout ceci est hypothétique sur le dessus de ma tête, alors j'ai peut-être raté quelques choses mais je pense qu'il vaut le coup d'être ici comme quelque chose de commencer à fouiller dans le temps. Je vais voir si je peux le faire fonctionner pour mes besoins.
OriginalL'auteur Optiq