Есть ли способ динамически визуализировать разные шаблоны для компонента angular 1.5

У меня есть несколько компонентов angular 1.5, которые все используют одни и те же атрибуты и структуру данных. Я думаю, что их можно было переустановить в один компонент, но мне нужен способ динамического выбора шаблона на основе интерполированного значения атрибута type.

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

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

Я не могу использовать templateUrl function($element, $attrs) {}, потому что значения в $attrs неинтерполируются, поэтому я бы не получил тип, указанный в переданных данных.

У меня может быть только один большой шаблон с серией директив ng-if или ng-switch, но я хотел бы оставить шаблоны отдельными.

В качестве альтернативы я мог бы просто разделить компоненты и использовать ng-switch и т.д. в родительском компоненте, но мне это не нравится, поскольку кажется, что много повторений.

Я ищу решение, в котором я могу использовать интерполированный type, переданный в привязки, чтобы соответствовать шаблону url для каждого типа, который затем будет использоваться для сборки компонента.

Возможно ли это?

Спасибо

Ответ 1

Это не то, для чего были специально созданы компоненты. Задача сводится к использованию директивы с динамическими шаблонами. Существующий - ng-include.

Чтобы использовать его внутри компонента, он должен быть:

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

Ответ 2

Вы можете вводить любую службу и устанавливать динамический URL

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