Angular2/4 : Actualisation Des Données En Temps Réel
J'ai besoin d'actualiser les données dans un composant de page dans un intervalle. J'ai aussi besoin d'actualiser les données après avoir fait un peu d'action. Je suis à l'aide de Obeservables dans le service de sorte que je peux souscrire à quand la réponse est prêt. Je suis poussant les abonnements à un objet de façon à ce que je peux dire que sur ngDestroy
, je pense, j'ai des méthodes suivantes pour atteindre le même.
Méthode 1 : setInterval
J'ai mis un intervalle sur ngOnInit
, qui va appeler le refreshData dans l'égalité de l'intervalle. L'intervalle objet sera effacé à l'aide de clearInterval
dans ngOnDestroy
méthode.
export class MyComponent implements OnInit, OnDestroy {
private subscription: Subscription = new Subscription();
data: any;
interval: any;
ngOnInit() {
this.refreshData();
this.interval = setInterval(() => {
this.refreshData();
}, 5000);
}
ngOnDestroy() {
this.subscription.unsubscribe();
clearInterval(this.interval);
}
refreshData(){
this.subscription.add(
this.myService.getData()
.subscribe(data => {
this.data = data;
})
);
}
doAction(){
this.subscription.add(
this.myService.doAction()
.subscribe(result => {
if(result === true){
this.refreshData();
}
})
);
}
}
Q1 : Sur chaque rafraîchissement appeler un abonnement sera ajouté à la subscription
objet, cette augmentation de l'utilisation de la mémoire et de plantage du navigateur, si l'utilisateur maintient la page s'est ouverte pendant un certain temps?
Method2 : Observables.minuterie
Cette méthode est d'utiliser une minuterie qui sera créé après l'actualisation des données.
export class MyComponent implements OnInit, OnDestroy {
private subscription: Subscription = new Subscription();
data: any;
ngOnInit() {
this.refreshData();
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
refreshData(){
this.subscription.add(
this.myService.getData()
.subscribe(data => {
this.data = data;
this.subscribeToData();
})
);
}
subscribeToData(){
this.subscription.add(
Observable.timer(10000).subscribe(() => this.refreshData())
);
}
doAction(){
this.subscription.add(
this.myService.doAction()
.subscribe(result => {
if(result === true){
this.refreshData();
}
})
);
}
}
Q2 : j'ai la même question(Q1) ici. De cette façon, va ajouter de la minuteries également l'objet d'abonnement, donc enfait les abonnements de l'objet d'abonnement est doublé.
Q3 : Pour actualiser les données après la méthode de l'action - doAction(), le refreshData est appelé. Il en sera de créer une autre chaîne de la minuterie?
Q4 : quelle est la meilleure manière sans fuites de mémoire ou si il existe une autre manière?
Vous devez vous connecter pour publier un commentaire.
Vous devriez être en mesure de le faire sans problèmes:
Comme par ce post Angulaire prendra soin de nettoyer après lui-même.
Cependant, si vous allez avoir un live flux de données dans votre application, je vous suggère de changer votre composant de sorte que, plutôt que de souscrire à chaque réponse de votre service de requête http, vous devez souscrire une fois pour une nouvelle observables
data$
propriété de votre service dans votre composantngOnInit()
. Puis, sur l'intervalle (comme vous le faites) appelupdateData()
sur votre service (ou de configuration de l'intervalle de à l'intérieur de votre service), mais de ne pas souscrire. Lorsque votre service avec succès récupère les données, il pousse la prochaine valeur à ses observablesdata$
de la propriété, vous donnant un flux de données à partir de votre service que vous pouvez réagir à n'importe où dans votre application.Avec
myService.data$
être observable BehaviourSubject mis à jour dans votre service, quelque chose comme ceci:De cette façon, vous pouvez éviter de multiples abonnements et de rendre le flux de données à la disposition de tout composant qui a besoin d'elle.
this.myService.data$
?$
à la fin de la propriété?this.myService.updateData()
n'a pas travaillé.Je suis juste l'extension @SpaceFozzy de répondre à un peu de sorte qu'il sera utile pour les futurs visiteurs ici. Pour actualiser les données, j'ai utilisé de la façon de @SpaceFozzy. Mais pour les abonnements, j'ai eu une meilleure approche. Veuillez vous référer à la réponse - https://stackoverflow.com/a/41177163. J'ai donc mis à jour mon service et composant comme suit. Espérons que cette aide.
Mon Composant
Mon Service
Il suffit d'exécuter cette commande dans votre dossier de projet pour les utilisateurs de linux: