Czy istnieje sposób dynamicznego renderowania różnych szablonów dla komponentu kątowego 1.5

Question

Mam wiele kątowych elementów 1.5, które wszystkie mają takie same atrybuty i strukturę danych. Myślę, że można je ponownie uwzględnić w pojedynczym komponencie, ale potrzebuję sposobu na dynamiczny wybór szablonu na podstawie interpolowanej wartości atrybutu type.

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

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

nie mogę użyć templateUrl function($element, $attrs) {} ponieważ wartości w $attrs są uninterpolated więc nie dostanie typu określonego w przekazany w danych.

Mogę mieć jeden duży szablon z serią dyrektyw ng-if lub ng-switch, ale chciałbym zachować oddzielne szablony.

Alternatywnie, mogę po prostu zachować komponenty oddzielne i używać ng-switch itp. W komponencie nadrzędnym, ale nie podoba mi się to, ponieważ wygląda na to, że jest dużo powtórzeń.

Szukam rozwiązania, w którym można użyć interpolowanego type przekazanego do powiązań, aby dopasować szablon adresu URL do każdego typu, który zostanie następnie użyty do zbudowania komponentu.

Czy to możliwe?

Dzięki

Answer 1

To nie jest coś, że komponenty zostały specjalnie wykonane dla. Zadanie polega na użyciu dyrektywy z dynamicznymi szablonami. Istniejący to ng-include.

Aby użyć go w składniku, powinno być:

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'; 
     } 
    } 
    } 
} 

Answer 2

można wstrzykiwać każdą usługę i ustawić dynamiczny url

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