AngularJS 1.5++ অংশগুলি প্রহরীদের সমর্থন করে না, চারপাশের কাজটি কী?




angularjs-directive angularjs-scope (5)

আমি আমার কাস্টম নির্দেশকে নতুন উপাদান আর্কিটেকচারে আপগ্রেড করছি। আমি পড়েছি যে উপাদানগুলি পর্যবেক্ষকদের সমর্থন করে না। এটা কি সঠিক? যদি তা হয় তবে কীভাবে আপনি কোনও সামগ্রীর পরিবর্তনগুলি সনাক্ত করতে পারেন? একটি মৌলিক উদাহরণের জন্য আমার কাছে কাস্টম উপাদান myBox যার একটি গেমের সাথে বাঁধার সাথে একটি শিশু উপাদান রয়েছে game গেমের উপাদানগুলির মধ্যে যদি কোনও পরিবর্তন খেলা থাকে তবে আমি কীভাবে মাইবক্সের মধ্যে একটি সতর্কতা বার্তা দেখাব? আমি বুঝতে পেরেছি rxJS পদ্ধতি আছে এটি কি কৌণিকভাবে খাঁটিভাবে করা সম্ভব? আমার JSFiddle

জাভাস্ক্রিপ্ট

var app = angular.module('myApp', []);
app.controller('mainCtrl', function($scope) {

   $scope.name = "Tony Danza";

});

app.component("myBox",  {
      bindings: {},
      controller: function($element) {
        var myBox = this;
        myBox.game = 'World Of warcraft';
        //IF myBox.game changes, show alert message 'NAME CHANGE'
      },
      controllerAs: 'myBox',
      templateUrl: "/template",
      transclude: true
})
app.component("game",  {
      bindings: {game:'='},
      controller: function($element) {
        var game = this;


      },
      controllerAs: 'game',
      templateUrl: "/template2"
})

এইচটিএমএল

<div ng-app="myApp" ng-controller="mainCtrl">
  <script type="text/ng-template" id="/template">
    <div style='width:40%;border:2px solid black;background-color:yellow'>
      Your Favourite game is: {{myBox.game}}
      <game game='myBox.game'></game>
    </div>
  </script>

 <script type="text/ng-template" id="/template2">
    <div>
    </br>
        Change Game
      <textarea ng-model='game.game'></textarea>
    </div>
  </script>

  Hi {{name}}
  <my-box>

  </my-box>

</div><!--end app-->

Watchers ছাড়াই লেখার উপাদান

এই উত্তরটি প্রহরী ব্যবহার না করেই AngularJS 1.5 উপাদান লিখতে ব্যবহার করার জন্য পাঁচটি কৌশল রূপরেখা দেয় Watchers

ng-change ডাইরেক্টিভ ব্যবহার করুন

অ্যাংুলারজেএস 2 এর প্রস্তুতিতে ঘড়ি ব্যবহার না করে অবজেক্ট স্টেটের পরিবর্তনগুলি পর্যবেক্ষণ করার জন্য কোন ওল্ড পদ্ধতি উপলব্ধ?

ইনপুট পরিবর্তনগুলিতে প্রতিক্রিয়া জানাতে আপনি ng-change নির্দেশিকাটি ব্যবহার করতে পারেন।

<textarea ng-model='game.game' 
          ng-change="game.textChange(game.game)">
</textarea>

এবং ইভেন্টটিকে কোনও প্যারেন্ট উপাদানগুলিতে প্রচার করতে ইভেন্ট হ্যান্ডলারটি শিশু উপাদানটির একটি বৈশিষ্ট্য হিসাবে যুক্ত করা দরকার।

<game game='myBox.game' game-change='myBox.gameChange($value)'></game>

জাতীয়

app.component("game",  {
      bindings: {game:'=',
                 gameChange: '&'},
      controller: function() {
        var game = this;
        game.textChange = function (value) {
            game.gameChange({$value: value});
        });

      },
      controllerAs: 'game',
      templateUrl: "/template2"
});

এবং মূল উপাদানটিতে:

myBox.gameChange = function(newValue) {
    console.log(newValue);
});

এটি এগিয়ে যাওয়ার পছন্দসই পদ্ধতি। $watch ব্যবহারের অ্যাঙ্গুলারজেএস কৌশলটি স্কেলযোগ্য নয় কারণ এটি একটি ভোটদান কৌশল। $watch শ্রোতার সংখ্যা যখন 2000 এর কাছাকাছি পৌঁছায়, ইউআই আস্তে আস্তে আসে। কৌণিক 2 এ কৌশলটি ফ্রেমওয়ার্কটি আরও প্রতিক্রিয়াশীল করা এবং $watch রাখা $scope এড়ানো এড়ানো।

Life $onChanges লাইফ-চক্র হুক ব্যবহার করুন

1.5.3 সংস্করণ সহ, $onChanges লাইফ-চক্র হুক যুক্ত করেছে।

দস্তাবেজ থেকে:

নিয়ামক নিম্নলিখিত পদ্ধতিগুলি সরবরাহ করতে পারেন যা জীবনচক্র হুক হিসাবে কাজ করে:

  • C onChanges (changeObj) - যখনই ওয়ান-ওয়ে ( < ) বা ইন্টারপোলেশন ( @ ) বাইন্ডিং আপডেট হয় তখনই কল করা হয়। changesObj একটি হ্যাশ, যার কীগুলি আবদ্ধ বৈশিষ্ট্যের নাম যা পরিবর্তিত হয়েছে, এবং মানগুলি ফর্মটির একটি অবজেক্ট { currentValue: ..., previousValue: ... } বাইরের মানের দুর্ঘটনাজনিত রূপান্তরকে রোধ করতে আবদ্ধ মানকে ক্লোনিং করার মতো উপাদানগুলির মধ্যে আপডেটগুলি ট্রিগার করতে এই হুক ব্যবহার করুন।

- AngularJS সমন্বিত দিকনির্দেশক এপিআই রেফারেন্স - লাইফ-চক্র হুক

$onChanges < ওয়ান-ওয়ে বাইন্ডিংগুলির সাথে উপাদানগুলিতে বাহ্যিক পরিবর্তনের প্রতিক্রিয়া জানাতে ব্যবহৃত হয়। ng-change নির্দেশিকাটি ng-model কন্ট্রোলার থেকে & বাইন্ডিংগুলির সাথে উপাদানগুলির বাইরে পরিবর্তনগুলির প্রস্তাব করতে ব্যবহৃত হয়।

$doCheck লাইফ-চক্র হুক ব্যবহার করুন

1.5.8 সংস্করণ সহ , AngularJS ile $doCheck লাইফ-চক্র $doCheck $compile পরিষেবাতে যুক্ত করেছে।

দস্তাবেজ থেকে:

নিয়ামক নিম্নলিখিত পদ্ধতিগুলি সরবরাহ করতে পারেন যা জীবনচক্র হুক হিসাবে কাজ করে:

  • $doCheck() - ডাইজেস্ট চক্রের প্রতিটি $doCheck() কল করা হয়। পরিবর্তনগুলি সনাক্ত এবং কার্যকর করার জন্য একটি সুযোগ সরবরাহ করে। আপনি যে পরিবর্তনগুলি সনাক্ত করেছেন তার প্রতিক্রিয়া হিসাবে গ্রহণ করতে চান এমন কোনও পদক্ষেপ অবশ্যই এই হুক থেকে প্রার্থনা করা উচিত; কখন $onChanges বলা হয় $onChanges প্রয়োগের কোনও প্রভাব নেই $onChanges উদাহরণস্বরূপ, যদি আপনি গভীর সমতা পরীক্ষা করতে চান বা কোনও তারিখের বিষয় পরীক্ষা করতে চান তবে এই হুকটি কার্যকর হতে পারে, যে পরিবর্তনগুলি $onChanges পরিবর্তন সনাক্তকারী দ্বারা সনাক্ত করা যায় না এবং এটি পরিবর্তনগুলি ট্রিগার না করে। এই হুক কোনও যুক্তি ছাড়াই ডাকা হয়; যদি পরিবর্তনগুলি সনাক্ত করে তবে আপনাকে বর্তমান মানগুলির তুলনা করার জন্য পূর্ববর্তী মান (গুলি) অবশ্যই সংরক্ষণ করতে হবে।

- AngularJS সমন্বিত দিকনির্দেশক এপিআই রেফারেন্স - লাইফ-চক্র হুক

require সাথে আন্তঃগঠিত যোগাযোগ

একে অপরের মধ্যে যোগাযোগ সক্ষম করার জন্য দিকনির্দেশকগুলিকে অন্যান্য নির্দেশাবলীর কন্ট্রোলারের require হতে পারে। require সংস্থার জন্য কোনও অবজেক্ট ম্যাপিং সরবরাহ করে এটি কোনও উপাদানে অর্জন করা যেতে পারে। অবজেক্ট কী প্রপার্টি নাম উল্লেখ করে যার অধীনে প্রয়োজনীয় কন্ট্রোলার (বস্তুর মান) প্রয়োজনীয় উপাদানটির নিয়ামকের সাথে আবদ্ধ থাকবে।

app.component('myPane', {
  transclude: true,
  require: {
    tabsCtrl: '^myTabs'
  },
  bindings: {
    title: '@'
  },
  controller: function() {
    this.$onInit = function() {
      this.tabsCtrl.addPane(this);
      console.log(this);
    };
  },
  templateUrl: 'my-pane.html'
});

আরও তথ্যের জন্য, AngularJS বিকাশকারী নির্দেশিকা দেখুন - আন্তঃগঠিত যোগাযোগ

RxJS সহ RxJS পরিষেবা থেকে মানগুলি RxJS

উদাহরণস্বরূপ রাষ্ট্রের অধীনে আপনার কোনও পরিষেবা রয়েছে এমন পরিস্থিতিতে কী হবে। কীভাবে আমি সেই পরিষেবায় পরিবর্তনগুলি ঠেকাতে পারি এবং পৃষ্ঠার অন্যান্য এলোমেলো উপাদানগুলি কীভাবে এই পরিবর্তন সম্পর্কে সচেতন হতে পারে? ইদানীং এই সমস্যাটি মোকাবেলার সাথে লড়াই করা হয়েছে

RxJS সাথে একটি পরিষেবা তৈরি করুন।

<script src="//unpkg.com/angular/angular.js"></script>
<script src="//unpkg.com/rx/dist/rx.all.js"></script>
<script src="//unpkg.com/rx-angular/dist/rx.angular.js"></script>
var app = angular.module('myApp', ['rx']);

app.factory("DataService", function(rx) {
  var subject = new rx.Subject(); 
  var data = "Initial";

  return {
      set: function set(d){
        data = d;
        subject.onNext(d);
      },
      get: function get() {
        return data;
      },
      subscribe: function (o) {
         return subject.subscribe(o);
      }
  };
});

তারপরে পরিবর্তনগুলি সাবস্ক্রাইব করুন।

app.controller('displayCtrl', function(DataService) {
  var $ctrl = this;

  $ctrl.data = DataService.get();
  var subscription = DataService.subscribe(function onNext(d) {
      $ctrl.data = d;
  });

  this.$onDestroy = function() {
      subscription.dispose();
  };
});

ক্লায়েন্টরা DataService.subscribe সহ পরিবর্তনের জন্য সাবস্ক্রাইব করতে পারবেন এবং প্রযোজকরা DataService.subscribe সাহায্যে পরিবর্তনগুলি DataService.subscribe পারবেন

পিএলএনকেআর- এর ডেমো


অামি দেরি করে ফেলেছি. তবে এটি অন্য লোকেদের সহায়তা করতে পারে।

app.component("headerComponent", {
    templateUrl: "templates/header/view.html",
    controller: ["$rootScope", function ($rootScope) {
        let $ctrl = this;
        $rootScope.$watch(() => {
            return $ctrl.val;
        }, function (newVal, oldVal) {
            // do something
        });
    }]
});

আমার সমাধানটিতে আগ্রহী যে কোনও ব্যক্তির কাছে, আমি আরএক্সজেএস অবজারভেবলের অবলম্বন করি, যা আপনি কৌনিক 2 এ পৌঁছানোর সময় আপনাকে কী ব্যবহার করতে হবে তা এখানে উপাদানগুলির মধ্যে যোগাযোগের জন্য একটি কার্যকারী ফিডল, এটি আমাকে কী দেখার জন্য তার উপর আরও নিয়ন্ত্রণ দেয়।

জেএস ফিডল আরএক্সজেএস পর্যবেক্ষণযোগ্য

class BoxCtrl {
    constructor(msgService) {
    this.msgService = msgService
    this.msg = ''

    this.subscription = msgService.subscribe((obj) => {
      console.log('Subscribed')
      this.msg = obj
    })
    }

  unsubscribe() {
    console.log('Unsubscribed')
    msgService.usubscribe(this.subscription)
  }
}

var app = angular
  .module('app', ['ngMaterial'])
  .controller('MainCtrl', ($scope, msgService) => {
    $scope.name = "Observer App Example";
    $scope.msg = 'Message';
    $scope.broadcast = function() {
      msgService.broadcast($scope.msg);
    }
  })
  .component("box", {
    bindings: {},
    controller: 'BoxCtrl',
    template: `Listener: </br>
    <strong>{{$ctrl.msg}}</strong></br>
    <md-button ng-click='$ctrl.unsubscribe()' class='md-warn'>Unsubscribe A</md-button>`
  })
  .factory('msgService', ['$http', function($http) {
    var subject$ = new Rx.ReplaySubject();
    return {
      subscribe: function(subscription) {
        return subject$.subscribe(subscription);
      },
      usubscribe: function(subscription) {
        subscription.dispose();
      },
      broadcast: function(msg) {
        console.log('success');
        subject$.onNext(msg);
      }
    }
  }])

সত্যিই দুর্দান্ত উত্তর গৃহীত হয়েছে, তবে আমি যুক্ত করতে পারি যে আপনি ইভেন্টগুলির শক্তিও ব্যবহার করতে পারেন (কিছুটা কিউটি সিগন্যাল / স্লটগুলির মতো যদি আপনি চান)।

একটি ইভেন্ট সম্প্রচারিত হয়: $rootScope.$broadcast("clickRow", rowId) কোনও পিতামাতার (বা এমনকি শিশুদের নিয়ন্ত্রক) দ্বারা $rootScope.$broadcast("clickRow", rowId) )। তারপরে আপনার নিয়ামকটিতে আপনি ইভেন্টটি এটির মতো পরিচালনা করতে পারেন:

$scope.$on("clickRow", function(event, data){
    // do a refresh of the view with data == rowId
});

আপনি এটিতে কিছু লগিং যোগ করতে পারেন (এখান থেকে নেওয়া: https://.com/a/34903433/3147071 )

var withLogEvent = true; // set to false to avoid events logs
app.config(function($provide) {
    if (withLogEvent)
    {
      $provide.decorator("$rootScope", function($delegate) {
        var Scope = $delegate.constructor;
        var origBroadcast = Scope.prototype.$broadcast;
        var origEmit = Scope.prototype.$emit;

        Scope.prototype.$broadcast = function() {
          console.log("$broadcast was called on $scope " + this.$id + " with arguments:",
                     arguments);
          return origBroadcast.apply(this, arguments);
        };
        Scope.prototype.$emit = function() {
          console.log("$emit was called on $scope " + this.$id + " with arguments:",
                     arguments);
          return origEmit.apply(this, arguments);
        };
        return $delegate;
      });
    }
});

$watch অবজেক্টটি $scope অবজেক্টের ভিতরে উপলব্ধ, সুতরাং আপনাকে আপনার নিয়ামক কারখানার ফাংশনের ভিতরে $scope যুক্ত করতে হবে এবং তারপরে ভেরিয়েবলের উপরে নজরদারি স্থাপন করতে হবে।

$scope.$watch(function(){
    return myBox.game;
}, function(newVal){
   alert('Value changed to '+ newVal)
});

এখানে ডেমো

দ্রষ্টব্য: আমি জানি যে আপনি component $scope নির্ভরতা অপসারণের জন্য component directive রূপান্তর করেছিলেন যাতে আপনি Angular2 এর এক ধাপ আরও কাছে পাবেন। তবে মনে হচ্ছে এটি এই মামলার জন্য সরিয়ে নেই।

হালনাগাদ

মূলত কৌণিক 1.5 যোগ করেছে। .component দুটি পৃথক কার্যকারিতা পৃথক করে। component হিসাবে পছন্দ করে। নির্দিষ্ট আচরণ যুক্ত সংযোজনকারী সঞ্চালন করতে পারে, যেখানে DOM- এ নির্দিষ্ট আচরণ যুক্ত করার জন্য directive হিসাবে দাঁড়িয়েছে। ডাইরেক্টিভটি .directive ডাইরেক্টিভ ডিডিও (ডাইরেক্টিভ ডেফিনিশন অবজেক্ট) এ কেবল র‍্যাপার পদ্ধতি। কেবলমাত্র আপনি যা দেখতে পাচ্ছেন তা .component পদ্ধতিটি ব্যবহার করার সময় তাদের link/compile ফাংশন সরিয়ে ফেলা হয়েছিল যেখানে আপনার কৌনিক সংকলিত .component পাওয়ার ক্ষমতা ছিল।

$doCheck উপাদান $doCheck হুকের $onChanges / $doCheck হুক ব্যবহার করুন, এগুলি কৌণিক 1.5.3+ সংস্করণের পরে উপলব্ধ।

C onChanges (changeObj) - যখনই বাইন্ডিংগুলি আপডেট করা হয় তখনও কল করা হয়। চেঞ্জওবজে একটি হ্যাশ যার কীগুলি সীমাবদ্ধ বৈশিষ্ট্যের নাম।

C doCheck () - পরিবর্তন বাধ্যতামূলক করার সময় ডাইজেস্ট চক্রের প্রতিটি পালকে ডাকা হয়। পরিবর্তনগুলি সনাক্ত এবং কার্যকর করার জন্য একটি সুযোগ সরবরাহ করে।

উপাদানটির অভ্যন্তরে একই ক্রিয়াকলাপটি ব্যবহার করে আপনার কোডটি কৌনিক 2 এ যাওয়ার উপযুক্ত হতে হবে তা নিশ্চিত করবে।







angularjs-1.5