すべて同じ属性とデータ構造をとる多くの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
を使用して、各タイプのテンプレートURLを一致させ、コンポーネントの構築に使用できるソリューションを探しています。
これは可能ですか?
ありがとう
これは、コンポーネントが特別に作られたものではありません。タスクは、動的テンプレートでディレクティブを使用するように絞り込まれます。既存のものは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';
}
}
}
}
任意のサービスを注入し、動的URLを設定できます
angular.module('myApp').component("dynamicTempate", {
controller: yourController,
templateUrl: ['$routeParams', function (routeParams) {
return 'app/' + routeParams["yourParam"] + ".html";
}],
bindings: {
},
require: {
}
});
いずれにせよ、スイッチングロジックをどこかに持つ必要があるので、親コンポーネントテンプレートに単純にそれを持たないのはなぜですか?
その場合、きれいで理解しやすい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
メソッドを正しく呼び出し、期待どおりにデータをロードします。マジックもブードゥーもありません。