कोणीय 2 में टाइमर कैसे बनाएं

Question 1

मुझे Angular 2 में एक टाइमर की आवश्यकता है, जो एक समय अंतराल के बाद टिक जाता है और कुछ कार्य करता है (कुछ कार्यों को कॉल किया जा सकता है)।

यह कोणीय 2 के साथ कैसे करें?

Question 2

पिछले सभी उत्तरों के अलावा, मैं इसे RxJS वेधशालाओं का उपयोग करके करूंगा

कृपया Observable.timer की जाँच करें

यहाँ एक नमूना कोड है, 2 सेकंड के बाद शुरू होगा और फिर हर सेकंड टिक जाएगा:

import {Component} from 'angular2/core';
import {Observable} from 'rxjs/Rx';

@Component({
    selector: 'my-app',
    template: 'Ticks (every second) : {{ticks}}'
})
export class AppComponent {
  ticks =0;
  ngOnInit(){
    let timer = Observable.timer(2000,1000);
    timer.subscribe(t=>this.ticks = t);
  }
}

और यहां एक काम करने वाला प्लंकर है

अद्यतन यदि आप AppComponent वर्ग पर घोषित एक फ़ंक्शन को कॉल करना चाहते हैं, तो आप निम्न में से एक कर सकते हैं:

** जिस फ़ंक्शन को आप कॉल करना चाहते हैं , उसे फेक नाम दिया गया है ,

ngOnInit(){
    let timer = Observable.timer(2000,1000);
    timer.subscribe(this.func);
}

उपर्युक्त दृष्टिकोण के साथ समस्या यह है कि यदि आप इसे 'फंक' के अंदर 'कॉल' करते हैं, तो यह AppComponent ऑब्जेक्ट के बजाय सब्स्क्राइबर ऑब्जेक्ट को संदर्भित करेगा, जो संभवतः वह नहीं है जो आप चाहते हैं।

हालाँकि, नीचे दिए गए दृष्टिकोण में, आप एक लैम्ब्डा एक्सप्रेशन बनाते हैं और उसके अंदर फ़ंक्शन फंक कहते हैं । इस तरह, फेक कॉल अब भी AppComponent के दायरे में है। मेरी राय में इसे करने का यह सबसे अच्छा तरीका है।

ngOnInit(){
    let timer = Observable.timer(2000,1000);
    timer.subscribe(t=> {
        this.func(t);
    });
}

वर्किंग कोड के लिए इस प्लंकर की जाँच करें ।

Question 3

एक अन्य उपाय टिमरऑब्जर्वेबल का उपयोग करना है

TimerObservable Observable का एक उपवर्ग है।

import {Component, OnInit, OnDestroy} from '@angular/core';
import {Subscription} from "rxjs";
import {TimerObservable} from "rxjs/observable/TimerObservable";

@Component({
  selector: 'app-component',
  template: '{{tick}}',
})
export class Component implements OnInit, OnDestroy {

  private tick: string;
  private subscription: Subscription;

  constructor() {
  }

  ngOnInit() {
    let timer = TimerObservable.create(2000, 1000);
    this.subscription = timer.subscribe(t => {
      this.tick = t;
    });
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

पुनश्च: सदस्यता समाप्त करने के लिए मत भूलना।

Question 4

import {Component, View, OnInit, OnDestroy} from "angular2/core";

import { Observable, Subscription } from 'rxjs/Rx';

@Component({

})
export class NewContactComponent implements OnInit, OnDestroy {

    ticks = 0;
    private timer;
    // Subscription object
    private sub: Subscription;


    ngOnInit() {
        this.timer = Observable.timer(2000,5000);
        // subscribing to a observable returns a subscription object
        this.sub = this.timer.subscribe(t => this.tickerFunc(t));
    }
    tickerFunc(tick){
        console.log(this);
        this.ticks = tick
    }

    ngOnDestroy(){
        console.log("Destroy timer");
        // unsubscribe here
        this.sub.unsubscribe();

    }


}

Question 5

Rxjs 6.2.2 और कोणीय 6.1.7 के साथ, मुझे एक मिल रहा था:

Observable.timer is not a function

त्रुटि। इस जगह से हल किया गया था Observable.timerके साथ timer:

import { timer, Subscription } from 'rxjs';

private myTimerSub: Subscription;    

ngOnInit(){    
    const ti = timer(2000,1000);    
    this.myTimerSub = ti.subscribe(t => {    
        console.log("Tick");    
    });    
}    

ngOnDestroy() {    
    this.myTimerSub.unsubscribe();    
}

Question 6

आप बस सेटइंटरवल उपयोगिता का उपयोग कर सकते हैं और कॉलबैक के रूप में तीर फ़ंक्शन का उपयोग कर सकते हैं ताकि thisघटक उदाहरण को इंगित करेगा।

पूर्व के लिए:

this.interval = setInterval( () => { 
    // call your functions like 
    this.getList();
    this.updateInfo();
});

अपने ngOnDestroy जीवन चक्र हुक के अंदर, अंतराल को साफ़ करें।

ngOnDestroy(){
    clearInterval(this.interval);
}

Question 7

मुझे एक समस्या का सामना करना पड़ा जिसे मुझे एक टाइमर का उपयोग करना था, लेकिन मुझे उन्हें 2 घटक एक ही समय, एक ही स्क्रीन में प्रदर्शित करना था। मैंने टाइमरऑब्जर्वेबल को एक सेवा में बनाया है। मैंने दोनों घटक में टाइमर की सदस्यता ली, और क्या हुआ? इसे सिंक नहीं किया जाएगा, क्योंकि नई सदस्यता हमेशा अपनी स्ट्रीम बनाती है।

मैं जो कहना चाहूंगा, वह यह है कि यदि आप कई स्थानों पर एक टाइमर का उपयोग करने की योजना बनाते हैं, तो हमेशा .publishReplay(1).refCount() ऑब्जर्वर के अंत में रखें, क्योंकि यह उसी धारा को हर बार प्रकाशित करेगा।

उदाहरण:

this.startDateTimer = Observable.combineLatest(this.timer, this.startDate$, (localTimer, startDate) => {
  return this.calculateTime(startDate);
}).publishReplay(1).refCount();

Question 8

एक npm पैकेज मिला जो RxJS को सेवा के रूप में आसान बनाता है।

https://www.npmjs.com/package/ng2-simple-timer

यदि आप एक ही घटक में कई बार उपयोग कर रहे हैं तो आप किसी मौजूदा टाइमर को 'सब्सक्राइब' कर सकते हैं ताकि आप बिलियन टाइमर न बना सकें।

Question 9

यदि आप ngOnIn पर एक विधि चलाना चाहते हैं, तो आप ऐसा कुछ कर सकते हैं:

इस 2 पुस्तकालयों को आरएक्सजेएस से आयात करें:

import {Observable} from 'rxjs/Rx';
import {Subscription} from "rxjs";

फिर टाइमर और निजी सदस्यता की घोषणा करें, उदाहरण:

timer= Observable.timer(1000,1000); // 1 second for 2 seconds (2000,1000) etc
private subscription: Subscription;

जब टाइमर बंद हो जाता है तो अंतिम लेकिन कम से कम चलाने की विधि

ngOnInit() {
  this.subscription = this.timer.subscribe(ticks=> {
    this.populatecombobox();  //example calling a method that populates a combobox
    this.subscription.unsubscribe();  //you need to unsubscribe or it will run infinite times
  });
}

वह सब, कोणीय ५

Question 10

Set Timer and auto call service after certain time
// Initialize from ngInit
ngOnInit(): void {this.getNotifications();}

getNotifications() {
    setInterval(() => {this.getNewNotifications();
    }, 60000);  // 60000 milliseconds interval 
}
getNewNotifications() {
    this.notifyService.getNewNotifications().subscribe(
        data => { // call back },
        error => { },
    );
}