Changes의 Angular 1.5 구성요소가 작동하지 않음

Changes의 Angular 1.5 구성요소가 작동하지 않음

Angular 1.x 애플리케이션이 꽤 크기 때문에 Angular 2로 완전히 업그레이드할 수는 없지만 새로운 아키텍처가 마음에 듭니다.버전 1.5는 놀라운 결과를 가져옵니다.components가 같은 앱으로 이동합니다.모든 멋진 것들이 그렇듯, 그것은 설명서가 부족합니다 ;-)

자, 여기 질문이 있습니다.컨트롤러 정의에는 다음 두 줄이 있습니다.

this.$onInit = setType;
this.$onChanges = setType;

첫번째는 작동하는 반면, 두번째는 작동하지 않습니다.사용중입니다'<'구속력이 있는따라서 첫 번째 부하에서는 구성 요소의 상태가 통과된 값에 따라 설정되지만 변경 사항은 반영되지 않습니다.[1]과 [2]부터 효과가 있어야 한다는 희망을 얻었습니다.

[1] https://docs.angularjs.org/guide/component

[2] https://angular.io/docs/js/latest/api/core/OnChanges-interface.html

업데이트 좋아요, 작동하면 안 된다는 것을 알았습니다: https://github.com/angular/angular.js/issues/14030

좋은 해결책을 아는 사람?

업데이트 2 1.5.3 기준으로 작동합니다.

AngularJs 1.5.3 기준으로, ctrl.someModel이 자식 구성 요소에 단방향으로 바인딩되어 있다고 가정하면, 다음은 변경 사항에서 $를 트리거하지 않습니다.

function get() { 
  api.getData().then( (data) => {
    ctrl.someModel.data = data
  }
}

개체의 업데이트 속성이 업데이트로 인식되지 않을 것 같습니다.

이것이 제가 현재 극복하고 있는 방법입니다.최선의 해결책이라고는 생각하지 않지만, 변경사항에 대해 $를 유발합니다.초기 모델의 깊은 복사본을 만들고 데이터를 속성 중 하나로 추가한 다음 초기 모델을 새 개체의 값으로 설정합니다.기본적으로 전체 개체를 업데이트하고, 이 개체는 라이프사이클 후크에 의해 선택됩니다.

function get() { 
  api.getData().then( (data='42') => {
    const updatedModel = angular.copy(ctrl.someModel)
    updatedModel.data = data
    ctrl.someModel = updatedModel
  }
}

그리고 하위 구성요소(모델을 '데이터'로 바인딩된 것으로 가정)에서:

this.$onInit = function(bindings) {
  if (bindings.data && bindings.data.currentValue) {
    console.log(bindings.data.currentValue) // '42' 
  }
}

상대하기$onChanges까다롭습니다.사실, 그래서 버전 1.5.8에서 그들이 도입한 것입니다.$doCheck, Angular 2 ngDoCheck와 유사합니다.

이렇게 하면 청취 중인 개체 내부의 변경 내용을 수동으로 들을 수 있습니다. 이 변경 내용은 다음 항목과 함께 발생하지 않습니다.$onChangeshook(객체의 참조가 변경된 경우에만 호출됨).동일하지만, 모든 다이제스트 사이클마다 호출되어 수동으로 변경 사항을 확인할 수 있습니다(그러나 시계보다 더 나은).

내가 아는 한, 둘 다$onChanges그리고.$onInit방법은 Angular와 함께 작동해야 합니다.JS 버전 1.5.3.

두 가지 용도를 모두 보여주는 plnkr을 만들었습니다.

이 및 요소의 두 가지 요소가 구성 요소는 로, , 를 구성 이 바인딩됩니다.< 요소의 입력 필드는 외부 구성 요소의 값을 업데이트합니다. 키보드 에서,$onChanges메서드가 실행됩니다(콘솔을 열어 확인).

angular.module("app", [])
.component("outer", {
    restrict: "E", 
    template: `<input ng-model=$ctrl.value> <br /> 
            <inner value="$ctrl.value">
            </inner>`
})  
.component("inner", {
    restrict: "E", 
    template: `{{$ctrl.value}}`, 
    bindings: {
       value: "<"
    },
    controller: function(){
       function setType() { 
          console.log("called");
       }
       this.$onInit = setType;
       this.$onChanges = setType;
   }
});

기본적으로 $onChanges 각도 주기 후크 트리거는 각도가 참조의 변경을 찾을 때(변경된 개체의 속성이 아닌), 자식의 $onChanges를 호출하려면 부모에서 새 개체를 할당합니다.예를들면,

angular.module("app", [])
.component("outer", {
    restrict: "E", 
    controller : function(){
        this.value = {};
        this.userButtonClick = function(someValue){
            this.value = angular.copy(someValue);
        }
    },
    template: `<input ng-click="$ctrl.userButtonClick({somevalue : "value"})" /> 
   <br /> 
            <inner value="$ctrl.value">
            </inner>`
    })           
.component("inner", {
        restrict: "E", 
        template: `{{$ctrl.value}}`, 
        bindings: {
           value: "<"
        },
        controller: function(){
           function setType() { 
              console.log("called");
           }
           this.$onInit = setType;
           this.$onChanges = function(changeObj){
               console.log("changed value",changeObj.value.currentValue);
           }
       }
    });

$doCheck는 바인딩 변경 여부와 상관없이 $digest 사이클마다 호출되므로, 모든 다이제스트 사이클에서 콜백을 트리거하려는 경우가 아니라면 사용하지 마십시오.

언급URL : https://stackoverflow.com/questions/35604919/angular-1-5-component-onchanges-is-not-working