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

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

14
angular-components angularjs

3 ответов

это не то, что компоненты были специально изготовлен для. Задача сужается до использования директивы с динамическими шаблонами. Существующий 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';
      }
    }
  }
}
17

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

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

вы должны иметь логику переключения где-то в любом случае, так почему бы просто не иметь его в шаблоне родительского компонента?

наличие чистого и понятного шаблона AngularJS в этом случае ИМО более ценно, чем немного повторения:

<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>

даже если вы измените myComponentDef.введите на лету, компоненты в коммутаторе будут правильно называть их соответствующими $onDestroy и $onInit методы и загрузить данные, как ожидалось - нет магии, нет вуду.

0