web-dev-qa-db-ja.com

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

すべて同じ属性とデータ構造をとる多くの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を一致させ、コンポーネントの構築に使用できるソリューションを探しています。

これは可能ですか？

ありがとう

angularjsangular-components
16
Joe

これは、コンポーネントが特別に作られたものではありません。タスクは、動的テンプレートでディレクティブを使用するように絞り込まれます。既存のものは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';
      }
    }
  }
}
18
Estus Flask

任意のサービスを注入し、動的URLを設定できます

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

いずれにせよ、スイッチングロジックをどこかに持つ必要があるので、親コンポーネントテンプレートに単純にそれを持たないのはなぜですか？

その場合、きれいで理解しやすい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メソッドを正しく呼び出し、期待どおりにデータをロードします。マジックもブードゥーもありません。

0
Vedran