একটি কৌণিক জেএস $ ঘড়ির সমকোণ সমান্তরাল কী?


213

অ্যাঙ্গুলারজেএস-এ আপনি স্কোপ ভেরিয়েবলের $watchফাংশনটি ব্যবহার করে পরিবর্তনগুলি পর্যবেক্ষণ করতে নজরদারি নির্দিষ্ট করতে সক্ষম হন $scope। কৌণিক ক্ষেত্রে পরিবর্তনশীল পরিবর্তনগুলি (উদাহরণস্বরূপ, উপাদান ভেরিয়েবল) দেখার সমতুল্য কী?


টাইপস্ক্রিপ্টে অ্যাকসেসর পান ব্যবহার করুন।
jmvtrinidad

এই নিবন্ধটি পার্থক্যটি ব্যাখ্যা করে দেখুন
ম্যাক্স কোরেস্তস্কি

উত্তর:


268

কৌণিক 2 এ, পরিবর্তন সনাক্তকরণ হ'ল স্বয়ংক্রিয় ... $scope.$watch()এবং $scope.$digest()আরআইপি

দুর্ভাগ্যক্রমে, দেব গাইডের পরিবর্তন সনাক্তকরণ বিভাগটি এখনও লিখিত হয়নি ( "অন্যান্য অন্যান্য জিনিস" বিভাগে আর্কিটেকচার ওভারভিউ পৃষ্ঠার নীচে একটি স্থানধারক রয়েছে ))।

পরিবর্তন সনাক্তকরণ কীভাবে কাজ করে তা সম্পর্কে আমার বোঝার জন্য এখানে:

  • জোন.জেজেস "বানর বিশ্বকে প্যাচ করে" - এটি ব্রাউজারের সমস্ত অ্যাসিনক্রোনাস এপিআইকে বাধা দেয় (যখন কৌণিক চলমান)। এই কারণেই আমরা setTimeout()আমাদের উপাদানগুলির অভ্যন্তরে কিছু ব্যবহার করার পরিবর্তে ব্যবহার করতে পারি $timeout... কারণ setTimeout()বানর প্যাচ করা।
  • কৌণিক "পরিবর্তন সনাক্তকারী" এর একটি গাছ তৈরি করে এবং বজায় রাখে। উপাদান / নির্দেশ অনুসারে এরকম একটি পরিবর্তন ডিটেক্টর (শ্রেণি) রয়েছে। (আপনি ইনজেকশনের মাধ্যমে এই বস্তুর অ্যাক্সেস পেতে পারেন ChangeDetectorRef)) কৌণিক উপাদান তৈরি করার সময় এই পরিবর্তনগুলি সনাক্তকারী তৈরি করা হয়। নোংরা চেক করার জন্য তারা আপনার সমস্ত বাইন্ডিংয়ের স্থিতির খোঁজ রাখে। এগুলি, এক অর্থে, স্বয়ংক্রিয়ভাবে সমান $watches()যা অ্যাঙ্গুলার 1 {{}}টেম্পলেট বাইন্ডিংয়ের জন্য সেট আপ করে ।
    কৌণিক 1 এর বিপরীতে, পরিবর্তন সনাক্তকরণ গ্রাফটি একটি নির্দেশিত বৃক্ষ এবং এতে চক্র থাকতে পারে না (এটি কৌনিক 2 কে আরও বেশি পারফর্মেন্ট করে তোলে, যেমন আমরা নীচে দেখব)।
  • যখন কোনও ইভেন্টে আগুন লাগে (কৌণিক অঞ্চলের অভ্যন্তরে), আমরা যে কোডটি লিখেছি (ইভেন্ট হ্যান্ডলার কলব্যাক) চলে। এটি যা যা ডেটা চায় তা আপডেট করতে পারে - ভাগ করা অ্যাপ্লিকেশন মডেল / রাজ্য এবং / অথবা উপাদানটির দৃশ্য অবস্থা।
  • এরপরে, জোনের জোনের.জ যুক্ত হওয়ার কারণে, এটি পরে অ্যাংুলারের পরিবর্তন সনাক্তকরণ অ্যালগরিদম চালায়। ডিফল্টরূপে (অর্থাত্, যদি আপনি onPushআপনার কোনও উপাদানতে পরিবর্তন সনাক্তকরণ কৌশলটি ব্যবহার না করেন ), গাছের প্রতিটি উপাদান একবার পরীক্ষা করা হয় (টিটিএল = 1) ... উপরে থেকে, গভীরতা-প্রথম ক্রমে order (ভাল, আপনি যদি ডিভ মোডে থাকেন তবে পরিবর্তন সনাক্তকরণটি দু'বার চলে (টিটিএল = 2) aboutএ সম্পর্কে আরও তথ্যের জন্য অ্যাপ্লিকেশন শ্যাফ.টিক () দেখুন ) ) এই পরিবর্তনগুলি সনাক্তকারী বস্তুগুলি ব্যবহার করে আপনার সমস্ত বাইন্ডিংয়ের উপর নোংরা চেকিং সম্পাদন করে।
    • লাইফসাইকেল হুকগুলি পরিবর্তন সনাক্তকরণের অংশ হিসাবে ডাকা হয়।
      আপনি যে উপাদানটি দেখতে চান সেটি যদি আদিম ইনপুট সম্পত্তি (স্ট্রিং, বুলিয়ান, সংখ্যা) হয় তবে আপনি ngOnChanges()পরিবর্তনগুলি সম্পর্কে অবহিত হওয়ার জন্য প্রয়োগ করতে পারেন ।
      যদি ইনপুট সম্পত্তিটি একটি রেফারেন্স টাইপ (অবজেক্ট, অ্যারে, ইত্যাদি) হয় তবে রেফারেন্সটি পরিবর্তন হয়নি (যেমন, আপনি বিদ্যমান অ্যারেতে কোনও আইটেম যুক্ত করেছেন), আপনাকে বাস্তবায়ন করতে হবে ngDoCheck()(আরও এই তথ্যের জন্য উত্তর দেখুন দেখুন) ইহার উপর).
      আপনার কেবলমাত্র উপাদানটির বৈশিষ্ট্য এবং / অথবা বংশধর উপাদানগুলির বৈশিষ্ট্যগুলি পরিবর্তন করা উচিত (কারণ একক গাছের পদচারণা বাস্তবায়নের কারণে - যেমন, একমুখী ডেটা প্রবাহ)। এখানে এমন একটি নিমজ্জনকারী যা লঙ্ঘন করে। রাষ্ট্রীয় পাইপগুলি আপনাকে এখানে ট্রিপ করতে পারে
  • যে কোনও বাইন্ডিং পরিবর্তনগুলি পাওয়া যায় তার জন্য উপাদানগুলি আপডেট করা হয় এবং তারপরে DOM আপডেট করা হয়। পরিবর্তন সনাক্তকরণ এখন শেষ হয়েছে।
  • ব্রাউজারটি ডিওএম পরিবর্তনগুলি লক্ষ্য করে এবং স্ক্রিনটি আপডেট করে।

আরও জানার জন্য অন্যান্য উল্লেখ:


উইন্ডো.এডএভেন্টলিস্টনার () ভেরিয়েবল পরিবর্তিত হলে সনাক্তকরণ ট্রিগার করে না ... এটি আমাকে পাগল করে তোলে, এর কোথাও কিছুই নেই।
অ্যালবার্ট জেমস টেডি

অ্যালবার্টজেমস টেডি, নির্দেশিকা মেটাডেটা এপিআই ডকটিতেhost "হোস্ট শ্রোতা" ডকুমেন্টেশন দেখুন । এটি অ্যাঙ্গুলার জোনের অভ্যন্তর থেকে কীভাবে বিশ্বব্যাপী ইভেন্টগুলি শুনতে হবে তা ব্যাখ্যা করে (সুতরাং পরিবর্তন সনাক্তকরণকে পছন্দসই হিসাবে ট্রিগার করা হবে)। এই উত্তরে একটি কার্যনির্বাহী লোক রয়েছে।
রাজকোককে

এই লিঙ্কটি সহায়ক হবে ..
অশোধক

@ মার্করাজকক, আমি পরিবর্তন সনাক্তকরণ সম্পর্কিত আমার নিবন্ধে রেফারেন্স যুক্ত করার স্বাধীনতা নিয়েছি। আশা করি আপত্তি করবেন না। এটি হুডের নীচে কী ঘটে তা দুর্দান্ত বিশদে ব্যাখ্যা করে।
ম্যাক্স কোরেস্তস্কি

একবিমুখী ডেটা ফ্লো বিধি লঙ্ঘনকারী প্লঙ্কার সম্পর্কে, আমি যুক্ত করতে চাই যে আপনি যদি সক্ষম প্যারোডমোড () দিয়ে প্লঙ্কার চালনা করেন তবে আপনি প্যারেন্ট ভিউতে কোনও আপডেট দেখতে পাবেন না, কারণ পরিবর্তন ডিটেক্টরটি একবারই চালিত হয়।
মিস্টার_এল

93

এই আচরণটি এখন উপাদান চক্রের অংশ।

ইনপুট পরিবর্তনগুলিতে অ্যাক্সেস পাওয়ার জন্য কোনও উপাদান অনকেনজেস ইন্টারফেসে ngOnChanges পদ্ধতিটি প্রয়োগ করতে পারে।

উদাহরণ:

import {Component, Input, OnChanges} from 'angular2/core';


@Component({
  selector: 'hero-comp',
  templateUrl: 'app/components/hero-comp/hero-comp.html',
  styleUrls: ['app/components/hero-comp/hero-comp.css'],
  providers: [],
  directives: [],

  pipes: [],
  inputs:['hero', 'real']
})
export class HeroComp implements OnChanges{
  @Input() hero:Hero;
  @Input() real:string;
  constructor() {
  }
  ngOnChanges(changes) {
      console.log(changes);
  }
}

77
এটি কেবলমাত্র @ ইনপুট () এর ক্ষেত্রে সত্য। আপনি যদি নিজের উপাদানটির নিজস্ব ডেটার পরিবর্তনগুলি ট্র্যাক করতে চান তবে এটি কাজ করবে না
ল্যান্ডারভি

4
আমি সাধারণ ভেরিয়েবলের পরিবর্তনগুলি পেতে পারি না (উদাহরণস্বরূপ বুলিয়ান)। কেবলমাত্র বস্তুর পরিবর্তনগুলি সনাক্ত করা হয়।
mtoloo

কেন উপাদানগুলির ডেকরেটারে একটি "ইনপুট" অ্যারে যুক্ত করা দরকার? পরিবর্তন সনাক্তকরণ এটি ছাড়াও কাজ করবে।
গিল এপশেটেন

68

যদি, স্বয়ংক্রিয় দ্বিমুখী বাইন্ডিং ছাড়াও, কোনও মান পরিবর্তিত হয়ে আপনি কোনও ফাংশনটিতে কল করতে চান, আপনি দ্বি-মুখী বাইন্ডিং শর্টকাট বাক্য গঠনটিকে আরও ভার্জোজ সংস্করণে ভেঙে ফেলতে পারেন।

<input [(ngModel)]="yourVar"></input>

সংক্ষিপ্ত

<input [ngModel]="yourVar" (ngModelChange)="yourVar=$event"></input>

(উদাহরণস্বরূপ http://victorsavkin.com/post/119943127151/angular-2-template-syntax )

আপনি এরকম কিছু করতে পারেন:

<input [(ngModel)]="yourVar" (ngModelChange)="changedExtraHandler($event)"></input>


শেষ উদাহরণে আপনি এনজিএমডেলের চারপাশে [] মুছে ফেলতে চেয়েছিলেন?
ইউজিন কুলাবোভভ

16

আপনি কৌণিক 2 এ ঘড়ি হিসাবে ব্যবহার করতে getter functionবা ব্যবহার করতে পারেন get accessor

এখানে ডেমো দেখুন ।

import {Component} from 'angular2/core';

@Component({
  // Declare the tag name in index.html to where the component attaches
  selector: 'hello-world',

  // Location of the template for this component
  template: `
  <button (click)="OnPushArray1()">Push 1</button>
  <div>
    I'm array 1 {{ array1 | json }}
  </div>
  <button (click)="OnPushArray2()">Push 2</button>
  <div>
    I'm array 2 {{ array2 | json }}
  </div>
  I'm concatenated {{ concatenatedArray | json }}
  <div>
    I'm length of two arrays {{ arrayLength | json }}
  </div>`
})
export class HelloWorld {
    array1: any[] = [];
    array2: any[] = [];

    get concatenatedArray(): any[] {
      return this.array1.concat(this.array2);
    }

    get arrayLength(): number {
      return this.concatenatedArray.length;
    }

    OnPushArray1() {
        this.array1.push(this.array1.length);
    }

    OnPushArray2() {
        this.array2.push(this.array2.length);
    }
}

12

এখানে মডেলটির জন্য গেটর এবং সেটার ফাংশনগুলি ব্যবহার করে অন্য একটি পদ্ধতি রয়েছে।

@Component({
  selector: 'input-language',
  template: `
  …
  <input 
    type="text" 
    placeholder="Language" 
    [(ngModel)]="query" 
  />
  `,
})
export class InputLanguageComponent {

  set query(value) {
    this._query = value;
    console.log('query set to :', value)
  }

  get query() {
    return this._query;
  }
}

4
এই বিষয় উন্মাদ। আমার কাছে একটি জটিল ফর্মের সাথে যুক্ত অনেকগুলি সম্পত্তি রয়েছে। আমি (change)তাদের প্রত্যেককেই হ্যান্ডলার যুক্ত করতে চাই না ; আমি get|setsআমার মডেলের প্রতিটি সম্পত্তিতে এস যুক্ত করতে চাই না ; এটি একটি যোগ করার জন্য সাহায্য করবে না get|setজন্য this.object; ngOnChanges() শুধুমাত্র @Inputগুলি পরিবর্তনগুলি সনাক্ত করে । পবিত্র মান্না! তারা আমাদের কী করেছে ??? আমাদেরকে একরকম গভীর নজরদারি দিন!
কোডি

6

আপনি যদি এটি 2 উপায় বাঁধাই করতে চান [(yourVar)]তবে আপনি ব্যবহার করতে পারেন তবে আপনাকে প্রয়োগ করতে হবেyourVarChange ইভেন্টটি হবে এবং প্রতিবার আপনার পরিবর্তনশীল পরিবর্তনটি এটিকে কল করতে হবে।

নায়কের পরিবর্তনকে ট্র্যাক করতে এরকম কিছু

@Output() heroChange = new EventEmitter();

এবং তারপরে আপনার নায়কটি পরিবর্তিত হয়ে গেলে কল করুন this.heroChange.emit(this.hero);

দ্য [(hero)]আপনার জন্য বাকি কাজগুলি করে দেবে বাঁধাই

এখানে উদাহরণ দেখুন:

http://plnkr.co/edit/efOGIJ0POh1XQeRZctSx?p=preview



2

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

অনুরূপ কিছু অর্জনের জন্য আমি যে কৌশলটি ব্যবহার করি $watchতা হ'ল একটি কৌণিক পরিষেবাতে BehaviorSubject( আরও একটি বিষয় এখানে ) ব্যবহার করা , এবং আমার উপাদানগুলি পরিবর্তনগুলি পেতে (দেখুন) যাতে এটিতে সাবস্ক্রাইব করতে দেয়। এটি $watchকৌণিক জেজে অনুরূপ , তবে আরও কিছু সেটআপ এবং বোঝার প্রয়োজন।

আমার উপাদানগুলিতে:

export class HelloComponent {
  name: string;
  // inject our service, which holds the object we want to watch.
  constructor(private helloService: HelloService){
    // Here I am "watching" for changes by subscribing
    this.helloService.getGreeting().subscribe( greeting => {
      this.name = greeting.value;
    });
  }
}

আমার সেবায়

export class HelloService {
  private helloSubject = new BehaviorSubject<{value: string}>({value: 'hello'});
  constructor(){}
  // similar to using $watch, in order to get updates of our object 
  getGreeting(): Observable<{value:string}> {
    return this.helloSubject;
  }
  // Each time this method is called, each subscriber will receive the updated greeting.
  setGreeting(greeting: string) {
    this.helloSubject.next({value: greeting});
  }
}

স্ট্যাকব্লিটজে একটি ডেমো এখানে

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.