Angular：使用变量更改组件模板答案

【问题标题】：Angular: Change component template using variablesAngular：使用变量更改组件模板
【发布时间】：2017-05-14 05:41:35
【问题描述】：

我的问题是：当父控制器中的变量值发生变化时，是否可以更改组件模板？这里有两种我尝试遵循的方法：

var topBarTemplateWithButton = [
'<section id="filters">',
'<div class="pull-left">',
'<h1>{{$ctrl.step}}</h1>',
'<div class="pull-left pageActionContainer">',
'<ng-transclude></ng-transclude>',
'</div>',
'</div>',
'</section>'].join(' ')

var topBarTemplateWithoutButton = [
    '<section id="filters">',
    '<div class="pull-left">',
    '<h1>{{$ctrl.step}}</h1>',
    '</div>',
    '</section>'].join(' ')

myApp.component('topBar', {
    bindings: {
        step: '<'
    },
    template: this.templateToUse,
    transclude: true,
    controller: function() {
        var me = this;

        me.$onInit = function() {
            this.templateToUse = topBarTemplateWithButton;
        }

        me.$onChanges = function(changes) {
            if(changes.step.currentValue != "Projects") {
                this.templateToUse = this.topBarTemplateWithoutButton;
            }else {

                this.templateToUse = topBarTemplateWithButton;

            }
        }
    }
});

和

var topBarTemplateWithButton = [
    '<section id="filters">',
    '<div class="pull-left">',
    '<h1>{{$ctrl.step}}</h1>',
    '<div class="pull-left pageActionContainer">',
    '<ng-transclude></ng-transclude>',
    '</div>',
    '</div>',
    '</section>'].join(' ')

var topBarTemplateWithoutButton = [
    '<section id="filters">',
    '<div class="pull-left">',
    '<h1>{{$ctrl.step}}</h1>',
    '</div>',
    '</section>'].join(' ')

myApp.component('topBar', {
    bindings: {
        step: '<'
    },
    template: '<div ng-include="$ctrl.templateToUse"/>,
    transclude: true,
    controller: function() {
        var me = this;

        me.$onInit = function() {
            this.templateToUse = topBarTemplateWithButton;
        }

        me.$onChanges = function(changes) {
            if(changes.step.currentValue != "Projects") {;
                this.templateToUse = this.topBarTemplateWithoutButton;
            }else {
                this.templateToUse = topBarTemplateWithButton;
            }
        }
    }
});

这两个例子都不起作用。那么当step的值发生变化时，是否可以改变这个组件的模板呢？感谢您的帮助。

【问题讨论】：

您需要让父控制器将值传递给组件，我只需使用模板指令如ng-if、ng-show、ng-hide 等来更改组件
ng-if 指令是最好的例子。要动态更改 HTML，需要取消注册观察者，需要销毁作用域，新 HTML 需要新作用域，并且需要编译和链接指令。要查看它是如何完成的：ng-if source code。或者只使用ng-if directive。
@theaccordance 谢谢你的回答
@georgeawg 也谢谢你

标签： angularjs components angular-components

【解决方案1】：

Template 字段可以是一个返回模板的函数，它把attrs 作为一个可注入的。这是一个可以完成您正在寻找的示例的示例。

template: function(attrs) {
    "ngInject";
    // check for custom attribute and return different template if it's there
},

然而，重要的是，此时这些是 未编译 属性，因为尚未编译模板。实际上，在确定模板之前，它是无法编译的。所以他们检查的属性只能是字符串文字..

【讨论】：

【解决方案2】：

我认为这不是为一个组件使用两个不同模板的最佳做法。主要规则是使用一个控制器和一个视图。所以从这个角度来看，实现这种行为最好是在组件模板中使用ng-switch 或ng-if，甚至制作两个不同的dumb 组件-topBarWithButton 和topBarWithoutButton。在这两种情况下，您都通过绑定与组件交互。我认为使用attrs 而不是使用bindings 有点笨拙。组件不是指令，因此在构建基于组件的应用程序时必须考虑组件。我认为您不应该使用 attrs 的原因有很多：

模板编译后无法更改。
您无法更改组件的状态。
您将状态保存在 html 模板中。
测试这种方法并不容易。

【讨论】：