Qu'est-ce que .subscribe dans Angular ?

Question

Je suis en train de travailler sur l'application angular-tour-of-heroes, et j'ai rencontré la méthode .subscribe dans le routage. Quelqu'un peut-il m'expliquer ce qui se passe ici ?

Lien pour l'application : https://embed.plnkr.co/?show=preview

Dans le fichier hero-detail.component.ts,

ngOnInit(): void {
  this.route.paramMap
    .switchMap((params: ParamMap) => this.heroService.getHero(+params.get('id')))
    .subscribe(hero => this.hero = hero);
}

Answer 1

.subscribe n'est pas une chose propre à Angular2.

C'est une méthode qui vient de rxjs qu'Angular utilise en interne.

Si vous vous imaginez vous abonner à une lettre d'information, chaque fois qu'il y a une nouvelle lettre d'information, elle sera envoyée chez vous (la méthode dans subscribe est appelée).

C'est ce qui se passe lorsque vous vous abonnez à une source de magazines ( qui s'appelle un Observable en rxjs bibliothèque)

Tous les AJAX dans Angular utilisent rxjs en interne et pour utiliser l'une d'entre elles, vous devez utiliser le nom de la méthode, par exemple get et ensuite appeler "subscribe", parce que get les retours et Observable .

Aussi, en écrivant ce code <button (click)="doSomething()"> Angular utilise Observables en interne et vous abonne à cette source d'événement, qui dans ce cas est une click événement.

Revenons à notre analogie avec Observables y newsletter stores après votre abonnement, dès qu'il y a un nouveau magazine et aussi longtemps qu'il y en a un, ils vous l'envoient. à moins que vous n'alliez et unsubscribe d'eux pour lequel vous devez vous souvenir du numéro d'abonnement ou de l'identifiant, qui en rxjs Dans ce cas, ce serait comme :

 let subscription = magazineStore.getMagazines().subscribe(
   (newMagazine)=>{

         console.log('newMagazine',newMagazine);

    }); 

Et quand tu ne veux plus recevoir les magazines :

   subscription.unsubscribe();

Il en va de même pour

 this.route.paramMap

qui renvoie un Observable et vous vous y abonnez.

Mon point de vue personnel est le suivant rxjs était l'une des meilleures choses qui ont été apportées au monde JavaScript et c'est encore mieux dans Angular.

Il y a 150~ rxjs (très similaires aux méthodes de lodash ) et celle que vous utilisez s'appelle switchMap

Answer 2

En Angular (actuellement sur Angular-6) .subscribe() est une méthode sur le type Observable. Le type Observable est un utilitaire qui diffuse de manière asynchrone ou synchrone des données vers divers composants ou services qui ont souscrit à l'observable.

L'observable est une implémentation/abstraction de la chaîne de promesses et fera partie de l'ES7 en tant que fonctionnalité proposée et très soutenue. Dans Angular, il est utilisé en interne, car rxjs est une dépendance du développement.

Un observable peut être considéré comme un flux de données provenant d'une source. Dans Angular, cette source est un point de terminaison d'API, un service, une base de données ou un autre observable. Mais le pouvoir de l'observable est qu'il n'attend pas une réponse unique. Il peut avoir une ou plusieurs valeurs qui sont retournées.

Lien vers la documentation de rxjs pour observable/subscribe ici : https://rxjs-dev.firebaseapp.com/api/index/class/Observable#subscribe-

Subscribe prend 3 méthodes comme paramètres, chacune étant une fonction :

• suivant : Pour chaque élément émis par l'observable, exécutez cette fonction
• erreur : Si quelque part dans le flux une erreur est trouvée, faites cette méthode
• complet : Une fois que tous les éléments du flux sont terminés, procédez comme suit

Dans chacun de ces cas, il est possible d'ajouter (ou de chaîner) d'autres utilitaires appelés opérateurs aux résultats afin de modifier la forme ou d'exécuter une logique en couches.

Dans l'exemple simple ci-dessus :

.subscribe(hero => this.hero = hero); dit en gros que sur cet observable, il faut prendre le héros qui est émis et lui donner la valeur de this.hero .

J'ajoute cette réponse pour donner plus de contexte aux Observables en me basant sur la documentation et ma compréhension.

Answer 3

Dans angular subscribe est utilisé avec Observable, ici vous pouvez trouver toutes les informations dont vous avez besoin

Utilisation des observables dans Angular 2

Answer 4

Un abonnement est un objet qui représente une ressource jetable, généralement l'exécution d'un Observable. Un abonnement a une méthode importante, unsubscribe, qui ne prend aucun argument et se débarrasse simplement de la ressource détenue par l'abonnement.

import { interval } from 'rxjs';

const observable = interval(1000);
const subscription = observable.subscribe(a=> console.log(a));

/** This cancels the ongoing Observable execution which
was started by calling subscribe with an Observer.*/

subscription.unsubscribe();

Un abonnement se contente essentiellement d'une fonction unsubscribe() pour libérer les ressources ou annuler les exécutions de l'Observable.

import { interval } from 'rxjs';

const observable1 = interval(400);
const observable2 = interval(300);

const subscription = observable1.subscribe(x => console.log('first: ' + x));
const childSubscription = observable2.subscribe(x => console.log('second: ' + x));

subscription.add(childSubscription);

setTimeout(() => {
// It unsubscribes BOTH subscription and childSubscription
subscription.unsubscribe();
}, 1000);

Selon la documentation officielle, Angular devrait se désabonner pour vous, mais apparemment, il y a un bug.

Answer 5

Subscribe() -Invoque l'exécution d'un Observable et enregistre les gestionnaires d'Observateurs pour les notifications qu'il émettra. -Observable - représentation de n'importe quel ensemble de valeurs sur une période de temps donnée.