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来匹配每个类型的模板网址，然后将用于构建组件。

这可能吗？

由于

Answer 1

这不是专门为其制作的组件。该任务缩小为使用带有动态模板的指令。现有的是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'; } } } }。

要在组件中使用它，它应该是：

{{1}}

Answer 2

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

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

Answer 3

在任何情况下，您都必须在某处使用切换逻辑，那么为什么不将它简单地放在父组件模板中呢？

在这种情况下，拥有干净且易于理解的AngularJS模板比IMO更有价值：

<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.type，交换机中的组件也会正确调用各自的$onDestroy和$onInit方法，并按预期加载数据 - 没有魔法，没有伏都教。< / p>

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

3 个答案: