web-dev-qa-db-ja.com

AngularJS1.5の同じコンポーネントに複数のテンプレートがあります

AngularJS 1.5コンポーネントで複数のテンプレートを使用できますか？ 1つの属性を持つ1つのコンポーネントがあるので、その属性名に基づいて別のテンプレートをロードしたいと思います。要素の属性名に基づいてテンプレートをロードするにはどうすればよいですか？

jsConfigApp.component('show', {
templateUrl: 'component/show.html',  //How to change it based on attribute value?
bindings:{
    view:"@"
},
controller: function () {
    console.log(this.view)
    if (this.view = "user") {
       console.log("user")
    } else if (this.view = "user") {
        console.log("shop")
    } else {
        console.log("none")
    }      
}
})

ありがとう。

angularjsangularjs-components
11
wmnitin

1.5.xでコンポーネントの動的テンプレートを作成するために2つの方法を使用します。

1）attrプロパティを介して渡す：

templateUrl: function($element, $attrs) {
      return $attrs.template;
}

2）サービスをテンプレートに注入し、そこからテンプレートを取得します：

templateURL関数：

templateUrl: function($element, $attrs,TemplateService) {
      console.log('get template from service:' + TemplateService.getTemplate());
      return TemplateService.getTemplate();
}

GetTemplate関数で、変数に基づいてテンプレートのURLを返します

getTemplate: function(){
     if (this.view = "user") {
          return "user.html";
    } else if (this.view = "user") {
          return "shop.html";
    } else {
        console.log("none")
    } 
    return "shop.html";       
}

まず、setメソッドを介して変数「view」をファクトリに渡します。

HTMLテンプレートをさらに変更する必要がある場合は、ディレクティブを使用して、より多くのサポートを備えたコンパイルサービスを使用してください。

9
Vu Quyet

テンプレートをパラメーターとしてコンポーネントに渡すのはどうですか？たとえば、次のようにcomponentを作成します。

module.component('testComponent', {
    controllerAs: 'vm',
    controller: Controller,
    bindings: {
        template  : '@'
    },
    templateUrl: function($element, $attrs) {
        var templates = {
            'first' :'components/first-template.html',
            'second':'components/second-template.html',
            'third' :'components/third-template.html'
        }
        return templates[$attrs.template];
    }
});

そして、以下のようにコンポーネントを使用すると役立つ場合があります

<test-component template='first'></test-component>
22
ozhanli