4

バインディング値に依存する子コンポーネントで初期化を実行して初期化を完了する前に、コンポーネント バインディングが親スコープで安定するのを待つ良い方法を見つけるのに苦労しています。

これが私のフィドルです: https://jsfiddle.net/nLpd9bsq/2/

可能な解決策：

1. $onChanges() を使用して、すべてのバインディングが安定するのを待ちます
。この例ではバインディングは 1 つしかありませんが、3 つのバインディングを持つコンポーネントがあり、各値が親スコープで非同期に読み込まれるとします。promise のようなものを使用せずに子スコープの初期化を同期しようとすると、混乱が生じます。

2. 「非同期値」
の初期化をサービスに移動 初期化をサービスに移動し、Promise を使用してそれを解決し、このサービスを大文字と小文字の両方のコンポーネントに挿入します。これを行うと、コンポーネント バインディング メカニズムをあきらめるという事実に加えて、appController での初期化を制御できなくなり、両方のコンポーネントが同じ Async 要求を行うのを防ぐためにサービスに追加のコードが必要になります。独自の初期化サイクル中に発生し、非同期リクエストが重複して終了します。

あなたの考えは何ですか？どのソリューションを使用しますか? ありがとう！

app.js

angular.module('app', [ ]);
angular
    .module('app')
  .controller('appController',function($scope, $timeout){
    var $ctrl = this;
    $timeout(function(){
      $ctrl.value = 'Async value'
    }, 1000);        
  })
  .component('uppercase', {
    bindings : {
        stringVal : '<'
    },
    controller: function($scope){

        this.$onChanges = function(obj){

        /* Needed to wait initialization on the parent */
        if(obj.stringVal.currentValue){
            this.upperVal = this.stringVal.toUpperCase();    
         }
      };
    },
    template : '<div>Uppercase value: {{$ctrl.upperVal}}</div>'
  })
  .component('lowercase', {
    bindings : {
        stringVal : '<'
    },
    controller: function($scope){

        this.$onChanges = function(obj){
          /* Needed to wait initialization on the parent */
          if(obj.stringVal.currentValue){
            this.upperVal = this.stringVal.toLowerCase();    
          }
      };
    },
    template :'<div>Lowercase value: {{$ctrl.upperVal}}</div>'
  });

app.html

<div ng-app="app" ng-controller="appController as $ctrl">
  <uppercase data-string-val="$ctrl.value"></uppercase>
  <lowercase data-string-val="$ctrl.value"></lowercase>
</div>
4

1 に答える 1

2

データの初期化をサービスに移し、データが利用可能または更新されたときにイベントを発行します。

https://stackoverflow.com/a/36291681/217408を使用して、リクエストの重複を防ぐことができます。

于 2016-05-10T06:54:43.107 に答える