Angular 1.5 컴포넌트에서 바인딩을 기다리는 방법($scope 없음).$watch)

Angular 1.5 컴포넌트에서 바인딩을 기다리는 방법($scope 없음).$watch)

나는 Angular 1.5 지시문을 쓰고 있는데, 그것이 존재하기 전에 바인딩된 데이터를 조작하려고 하는 불쾌한 문제에 부딪혔다.

제 코드는 다음과 같습니다.

app.component('formSelector', {
  bindings: {
    forms: '='
  },
  controller: function(FormSvc) {

    var ctrl = this
    this.favorites = []

    FormSvc.GetFavorites()
    .then(function(results) {
    ctrl.favorites = results
    for (var i = 0; i < ctrl.favorites.length; i++) {
      for (var j = 0; j < ctrl.forms.length; j++) {
          if (ctrl.favorites[i].id == ctrl.newForms[j].id) ctrl.forms[j].favorite = true
      }
     }
    })
}
...

보다시피, 즐겨찾기를 얻기 위해 AJAX에 전화를 걸고 내 서식 목록과 대조합니다.

문제는 구속이 채 끝나기도 전에 약속이 이행되고 있다는 것이다.루프를 실행할 때까지 ctrl.forms는 아직 정의되지 않았습니다.

$scope를 사용하지 않습니다.$watch(1.5 컴포넌트의 매력 중 하나) 바인딩이 완료될 때까지 어떻게 기다려야 합니까?

비슷한 문제가 있었습니다.보낼 값이 준비될 때까지 컴포넌트를 호출하지 않기 위해 이 작업을 수행했습니다.

<form-selector ng-if="asyncValue" forms="asyncValue" ></form-selector>

새로운 라이프 사이클 훅, 특히 를 호출하여 바인딩의 첫 번째 변경을 검출할 수 있습니다.isFirstChange방법.자세한 내용은 여기를 참조하십시오.

다음은 예를 제시하겠습니다.

<div ng-app="app" ng-controller="MyCtrl as $ctrl">
  <my-component binding="$ctrl.binding"></my-component>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.js"></script>
<script>
  angular
    .module('app', [])
    .controller('MyCtrl', function($timeout) {
      $timeout(() => {
        this.binding = 'first value';
      }, 750);

      $timeout(() => {
        this.binding = 'second value';
      }, 1500);
    })
    .component('myComponent', {
      bindings: {
        binding: '<'
      },
      controller: function() {
        // Use es6 destructuring to extract exactly what we need
        this.$onChanges = function({binding}) {
          if (angular.isDefined(binding)) {
            console.log({
              currentValue: binding.currentValue, 
              isFirstChange: binding.isFirstChange()
            });
          }
        }
      }
    });
</script>

원본 포스터에는 다음과 같이 적혀 있습니다.

구속이 채 끝나기도 전에 그 약속은 이행되고 있다...루프를 실행할 때까지 ctrl.forms는 아직 정의되지 않았습니다.

AngularJS 1.5.3 이후, 라이프 사이클 훅이 있어, OP의 질문을 만족시키려면 , 내부에서 만족하고 있는 바인딩에 의존하는 코드를 이동하기만 하면 됩니다.$onInit():

$onInit() - 요소상의 모든 컨트롤러가 구축되어 바인딩이 초기화된 후(및 이 요소의 디렉티브에 대한 pre 및 post linking 기능 전) 각 컨트롤러에서 호출됩니다.컨트롤러의 초기화 코드를 입력하기 좋은 장소입니다.

예를 들어 다음과 같습니다.

app.component('formSelector', {
  bindings: {
    forms: '='
  },
  controller: function(FormSvc) {
    var ctrl = this;
    this.favorites = [];

    this.$onInit = function() {
      // At this point, bindings have been resolved.
      FormSvc
          .GetFavorites()
          .then(function(results) {
            ctrl.favorites = results;
            for (var i = 0; i < ctrl.favorites.length; i++) {
              for (var j = 0; j < ctrl.forms.length; j++) {
                if (ctrl.favorites[i].id == ctrl.newForms[j].id) {
                  ctrl.forms[j].favorite = true;
                }
              }
            }
          });
    }
}

네, 있습니다.$onChanges(changesObj),그렇지만$onInit()구체적으로 언제 바인딩이 해결되었는지 보증받을 수 있는지에 대한 최초의 질문에 대해 설명합니다.

저도 비슷한 문제가 있어서 이 기사가 큰 도움이 되었습니다.http://blog.thoughtram.io/angularjs/2016/03/29/exploring-angular-1.5-lifecycle-hooks.html

페이지 로드 시 서버에 히트하는 Ajax 콜이 있으며 컴포넌트가 올바르게 로드하려면 Ajax 반환값이 필요합니다.다음과 같이 구현했습니다.

this.$onChanges = function (newObj) {
      if (newObj.returnValFromAJAX)
        this.returnValFromAJAX = newObj.returnValFromAJAX;
    };

이제 내 컴포넌트는 완벽하게 작동합니다.참고로 Angular 1.5.6을 사용하고 있습니다.

언급URL : https://stackoverflow.com/questions/35639435/how-to-wait-for-binding-in-angular-1-5-component-without-scope-watch