angularjs - 有没有办法为 Angular 1.5 组件动态渲染不同的模板

Question

我有许多 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 的解决方案传递给绑定(bind)以匹配每种类型的模板 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';
      }
    }
  }
}