有没有办法为角度1.5组件动态渲染不同的模板

Question

我有许多角度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,然后将用于构建组件.

这可能吗？

谢谢

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

Answer 2

您可以注入任何服务并设置动态URL

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