angular - जब एक @Input() मान कोणीय में बदल जाता है तो कैसे पता लगाएं?




angular2-changedetection (7)

अपने घटक में ngOnChanges() जीवन चक्र विधि का उपयोग करें।

डेटा-बाउंड प्रॉपर्टीज़ की जाँच के बाद और इनको देखने और कंटेंट से पहले बच्चों की जाँच की जाती है कि उनमें से कम से कम एक को बदल दिया गया है या नहीं।

यहाँ Docs

मेरे पास एक पैरेंट घटक (श्रेणीकम्पोनेंट), एक बाल घटक (वीडियोलैस्टकम्पोनेंट) और एक एपिसेर है।

मेरे पास काम करने के लिए यह ठीक है यानी प्रत्येक घटक जन्स एपी तक पहुंच सकता है और वेधशालाओं के माध्यम से इसका प्रासंगिक डेटा प्राप्त कर सकते हैं।

वर्तमान में वीडियो सूची घटक को केवल सभी वीडियो मिलते हैं, मैं इसे केवल एक विशेष श्रेणी के वीडियो को फ़िल्टर करना चाहूंगा, मैंने @Input() माध्यम से बच्चे को श्रेणी @Input()

CategoryComponent.html

<video-list *ngIf="category" [categoryId]="category.id"></video-list>

यह काम करता है और जब मूल @Input() श्रेणी बदल जाती है तो @Input() मान @Input() माध्यम से पारित हो जाता है, लेकिन मुझे तब VideoListComponent में यह पता लगाने और APIService के माध्यम से वीडियो सरणी को फिर से अनुरोध करने की आवश्यकता है (नए संस्करणId के साथ)।

AngularJS में मैंने वैरिएबल पर $watch किया होगा। इसे संभालने का सबसे अच्छा तरीका क्या है?


आपके पास एक ऑब्जर्वेबल भी हो सकता है, जो पैरेंट कंपोनेंट (कैटेग्मेंट) में बदलाव पर ट्रिगर करता है और वही करें जो आप चाइल्ड कंपोनेंट में सब्सक्राइब करना चाहते हैं। (videoListComponent)

service.ts 
public categoryChange$ : ReplaySubject<any> = new ReplaySubject(1);

-----------------
CategoryComponent.ts
public onCategoryChange(): void {
  service.categoryChange$.next();
}

-----------------
videoListComponent.ts
public ngOnInit(): void {
  service.categoryChange$.subscribe(() => {
   // do your logic
});
}

जब आपकी इनपुट प्रॉपर्टी में बदलाव होगा, तो ngOnChanges हमेशा ट्रिगर होगा:

ngOnChanges(changes: SimpleChanges): void {
 console.log(changes.categoryId.currentValue)
}

फंक्शन सिग्नेचर में SimpleChanges टाइप का उपयोग करते समय मुझे कंसोल के साथ-साथ कंपाइलर और IDE में भी त्रुटियां हो रही थीं। त्रुटियों को रोकने के लिए, हस्ताक्षर में any कीवर्ड का उपयोग करें।

ngOnChanges(changes: any) {
    console.log(changes.myInput.currentValue);
}

संपादित करें:

जैसा कि जॉन ने नीचे बताया है, आप डॉट नोटेशन के बजाय ब्रैकेट नोटेशन का उपयोग करते समय SimpleChanges सिग्नेचर का उपयोग कर सकते हैं।

ngOnChanges(changes: SimpleChanges) {
    console.log(changes['myInput'].currentValue);
}

यदि आप ngOnChange कार्यान्वयन og (onChange) विधि का उपयोग नहीं करना चाहते हैं, तो आप valueChanges event , ETC द्वारा किसी विशिष्ट आइटम के परिवर्तन की सदस्यता भी ले सकते हैं।

 myForm= new FormGroup({
first: new FormControl()   

});

this.myForm.valueChanges.subscribe(formValue => {
  this.changeDetector.markForCheck();
});

इस घोषणा में उपयोग करने के कारण markForCheck () रिटेन:

  changeDetection: ChangeDetectionStrategy.OnPush

सबसे सुरक्षित शर्त एक @Input पैरामीटर के बजाय एक साझा सेवा के साथ जाना है। इसके अलावा, @Input पैरामीटर जटिल नेस्टेड ऑब्जेक्ट प्रकार में परिवर्तनों का पता नहीं लगाता है।

एक सरल उदाहरण सेवा इस प्रकार है:

Service.ts

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class SyncService {

    private thread_id = new Subject<number>();
    thread_id$ = this.thread_id.asObservable();

    set_thread_id(thread_id: number) {
        this.thread_id.next(thread_id);
    }

}

Component.ts

export class ConsumerComponent implements OnInit {

  constructor(
    public sync: SyncService
  ) {
     this.sync.thread_id$.subscribe(thread_id => {
          **Process Value Updates Here**
      }
    }

  selectChat(thread_id: number) {  <--- How to update values
    this.sync.set_thread_id(thread_id);
  }
}

आप अन्य घटकों में समान कार्यान्वयन का उपयोग कर सकते हैं और आपके सभी घटक समान साझा मूल्यों को साझा करेंगे।


  @Input()
  public set categoryId(categoryId: number) {
      console.log(categoryId)
  }

कृपया इस विधि का उपयोग करके देखें। उम्मीद है की यह मदद करेगा





angular2-changedetection