AngularJS 1.5 中同一组件中有多个模板

Question

我可以在 AngularJS 1.5 组件中使用多个模板吗？我有一个具有一个属性的组件，所以我想根据该属性名称加载不同的模板。如何实现根据元素的属性名加载模板？

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")
    }      
}
})

谢谢。

Answer 1

我在1中使用了两种方法来制作组件的动态模板。5.x:

1) 通过属性传递属性:

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函数中return模板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 模板中进行更多更改，请返回使用指令并使用具有更多支持的编译服务。

Answer 2

将模板作为参数传递给组件怎么样？例如创建一个 component like:

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>

AngularJS 1.5 中同一组件中有多个模板

More than one template in same component in AngularJS 1.5

angularjs

angularjs-components