角度1.5のコンポーネントに対して異なるテンプレートを動的にレンダリングする方法はありますか

Question

すべての属性とデータ構造が同じ角度1.5のコンポーネントがあります。私はそれらを単一のコンポーネントに再因子付けすることができると思いますが、type属性の補間値に基づいてテンプレートを動的に選択する方法が必要です。 $attrsの値はので、私はデータで渡されたで指定された型を得ないでしょうuninterpolatedされているので、私はtemplateUrl function($element, $attrs) {}を使用することはできません

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

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

。

ng-ifまたはng-switchディレクティブの一連の大きなテンプレートを1つだけ持つことができますが、テンプレートを別にしておきたいと思います。

また、コンポーネントを別にしておき、親コンポーネントに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

あなたはどんなサービスを注入し、

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