각도 1.5 구성 요소 양방향 바인딩 변경시 초기화

Question

양방향 바인딩 된 개체가 변경 될 때 구성 요소를 다시 초기화하려고합니다.

<ul class="nav nav-pills nav-stacked"> 
    <li ng-repeat="tab in tabs" 
     ng-class="{'active': activeTab.id === tab.id }"> 
     <a href="" ng-click="setActive(tab)"> {{ tab.title }}</a> 
    </li> 
    </ul> 

    <my-component tab="activeTab"></my-component> 


app.component('myComponent', { 
    template: '<div>{{ $ctrl.tab.title }}</div>', 
    bindings: { 
    tab: '=' 
    }, 
    controller: function() { 
    var init = function() { 
     console.log('hi') 
    } 
    init() 
    } 
}) 

어떻게 init()이 때마다 변경 사항을 activeTab.id라고 확인 할 수 있습니까?

나는 lifecycle hooks을 들여다 보았지만 그 대답은 아닙니다.

here

는

Answer 1

app.component('myComponent', { 
    template: '<div>{{ $ctrl.tab.title }}</div>', 
    bindings: { 
    tab: '=', 
    tabChange:'&' 
    }, 
    controller: function($scope) { 
    $scope.$watch(
    function() { return $scope.$ctrl.tab; }, 
    function(newValue, oldValue) { 
    init(); 
    } 
); 

var init = function() { 
     console.log('hi'); 
    } 
    init() 
    } 
}) 

Answer 2

당신은 구성 요소의 $doCheck 방법을 사용한다 코드로 plunkr입니다 :

function myComponentController(){ 

    function init() { 
    console.log('hi') 
    } 

    var previousTabId; 
    this.$doCheck = function(){ 
    if (this.tab && previousTabId !== this.tab.id) { 
     previousTabId = this.tab.id; 
     init(); 
    } 
    }.bind(this); 

} 

app.component('myComponent', { 
    template: '<div>{{ $ctrl.tab.title }}</div>', 
    bindings: { 
    tab: '=' 
    }, 
    controller: [myComponentController] 
}) 

출처 : https://docs.angularjs.org/guide/component

$doCheck() - 각 차례에 호출 다이제스트주기 변경 사항을 감지하고 조치를 취할 수있는 기회를 제공합니다. 감지 한 변경 사항에 대한 응답으로 으로 가져 가기를 원하는 작업은이 후크 에서 호출해야합니다. 이것을 구현하면 $onChanges이 호출되면 일 때 아무런 영향을 미치지 않습니다. 예를 들어, 깊은 평등 검사를 수행하거나 Date 객체를 검사하려면 AngularJS의 변경 감지기에서 이 감지되지 않으므로 트리거 $onChanges이 아닌 변경 사항을 확인하려는 경우이 후크가 유용 할 수 있습니다. 이 후크는 인수없이 호출됩니다. 변경 사항을 감지하는 경우 비교 값인 의 이전 값을 현재 값에 저장해야합니다.

---

는 지금까지 내가 당신의 유스 케이스를 이해, 당신은 단지 단방향 바인딩이 필요합니다. - 단방향 바인딩이 업데이트 될 때마다 호출

$onChanges(changesObj) : 당신이 할 경우, 당신은 오히려 (편도 바인딩 속성에 예약되어 있습니다)를 $onChanges 방법을 사용해야합니다. changesObj은 변경된 바운드 속성의 이름을 키로 가지는 해시이며 값은 { currentValue, previousValue, isFirstChange() } 형태의 개체입니다. 바운드 값을 으로 복제하는 것과 같은 구성 요소 내에서 트리거 업데이트에이 훅을 사용하면 외부 값의 우연한 변경을 방지 할 수 있습니다.

그리고 당신은 아마 읽어야에 대한 $onInit도 정말 유용 $onDestroy 및 $postLink.