web-dev-qa-db-fra.com

Existe-t-il un moyen de rendre dynamiquement différents modèles pour un composant angulaire 1.5?

J'ai un certain nombre de composants angulaires 1.5 qui prennent tous les mêmes attributs et structure de données. Je pense qu’ils pourraient être redéfinis dans un seul composant, mais j’ai besoin d’un moyen de choisir dynamiquement un modèle basé sur la valeur interpolée de l’attribut type.

var myComponentDef = {
    bindings: {
        type: '<'
    },
    templateUrl: // This should be dynamic based on interpolated type value
};

angular.module('myModule').component('myComponent', myComponentDef);

Je ne peux pas utiliser templateUrl function($element, $attrs) {} car les valeurs dans $attrs sont non interpolées, je ne voudrais donc pas obtenir le type spécifié dans les données transmises.

Je pourrais avoir juste un grand modèle avec une série de directives ng-if ou ng-switch, mais j'aimerais que les modèles soient séparés.

Alternativement, je pourrais simplement garder les composants séparés et utiliser ng-switch etc. dans le composant parent, mais je n'aime pas cela, car cela semble être une répétition excessive.

Je recherche une solution permettant d'utiliser la variable type passée dans les liaisons afin de faire correspondre une URL de modèle pour chaque type, qui sera ensuite utilisée pour générer le composant.

Est-ce possible?

Merci

angularjsangular-components
15
Joe

Ce n’est pas quelque chose pour lequel les composants ont été spécialement conçus. La tâche se réduit à l'utilisation d'une directive avec des modèles dynamiques. Celui qui existe est ng-include.

Pour l'utiliser dans un composant, il devrait être:

var myComponentDef = {
  bindings: {
    type: '<'
  },
  template: '<div ng-include="$ctrl.templateUrl">',
  controller: function () {
    this.$onChanges = (changes) => {
      if (changes.type && this.type) {
        this.templateUrl = this.type + '.html';
      }
    }
  }
}
17
estus

Vous pouvez injecter n'importe quel service et définir une URL dynamique

angular.module('myApp').component("dynamicTempate", {
        controller: yourController,
        templateUrl: ['$routeParams', function (routeParams) {
           
            return 'app/' + routeParams["yourParam"] + ".html";
        
        }],
        bindings: {
        },
        require: {
        }
    });

12
Ram chittala

De toute façon, vous devez avoir la logique de commutation quelque part, alors pourquoi ne pas la placer simplement dans un modèle de composant parent?

Avoir un modèle AngularJS propre et compréhensible dans ce cas est plus utile à l’OMI qu’un peu de répétition:

<ng-container ng-switch="$ctrl.myComponentDef.type">
  <component-type1 ng-switch-when="type1" param="$ctrl.myComponentDef"></component-type1>
  <component-type2 ng-switch-when="type2" param="$ctrl.myComponentDef"></component-type2>
</ng-container>

Même si vous modifiez le type myComponentDef. à la volée, les composants du commutateur appellent correctement leurs méthodes respectives $onDestroy et $onInit et chargent les données comme prévu - pas de magie, pas de vaudou.

0
Vedran