각도 : 변수를 사용하여 구성 요소 템플릿 변경

Question

질문 : 부모 컨트롤러에서 변수 값이 변경되면 구성 요소 템플릿을 변경할 수 있습니까?

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 값이 변경되면이 구성 요소의 템플릿을 변경할 수 있습니까? 도와 줘서 고마워.

Answer 1

Template 필드는 템플릿을 반환하는 함수가 될 수 있으며 attrs을 주사제로 사용합니다. 다음은 당신이 찾고있는 것을 달성 할 수있는 예입니다.

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

중요한 점은, 그러나, 템플릿이 컴파일되지 않았기 때문에이이 시점에서 컴파일되지 않은 속성이 있다는 것입니다. 템플릿을 결정할 때까지 컴파일 할 수 없습니다. 그래서 당신들은 당신이 검사하는 것이 문자열 리터럴 일 뿐이라고 생각합니다.

Answer 2

하나의 구성 요소에 대해 두 개의 다른 템플릿을 사용하는 것은 좋지 않다고 생각합니다. 주요 규칙은 하나의보기로 하나의 컨트롤러를 사용하는 것입니다. 따라서 이러한 관점에서 볼 때 ng-switch 또는 ng-if을 구성 요소 템플릿 내에 사용하거나 dumb 두 가지 구성 요소 (및 topBarWithoutButton)를 만드는 것이 더 좋습니다. 이 두 경우 모두 바인딩을 통해 구성 요소와 상호 작용합니다. 나는 이것이 bindings 대신에 attrs을 사용하는 약간의 해키라고 생각한다. 구성 요소는 지침이 아니므로 구성 요소 기반 응용 프로그램을 작성할 때 구성 요소 측면에서 생각해야합니다. 나는 attrs를 사용하지 않아야하는 많은 이유가 있다고 생각한다.

1. 템플릿을 컴파일 한 후에는 변경할 수 없다.
2. 구성 요소의 상태를 변경할 수 없습니다.
3. 당신은 HTML 템플릿에 상태를 유지합니다.
4. 이 방법을 테스트하는 것은 쉽지 않습니다.