Table des matières
Objet observable (Observable)
Maison interface Web js tutoriel Explication détaillée de Observable (objet observable) dans Angular

Explication détaillée de Observable (objet observable) dans Angular

Mar 30, 2021 pm 06:49 PM
angular 可观察对象

Cet article vous fera découvrir Angular Observable. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Explication détaillée de Observable (objet observable) dans Angular

Recommandations de didacticiel associées : "tutoriel angulaire"

Objet observable (Observable)

Les objets observables prennent en charge la transmission de messages entre éditeurs et abonnés de votre application.

Les observables sont déclaratifs, c'est-à-dire une fonction définie qui publie une valeur qui ne s'exécutera pas réellement tant qu'un consommateur ne s'y abonnera pas.


Trois types de notifications qu'un objet observable peut émettre :

通知类型 说明
next 必要。用来处理每个送达值。在开始执行后可能执行零次或多次。
error 可选。用来处理错误通知。错误会中断这个可观察对象实例的执行过程。
complete 可选。用来处理执行完毕(complete)通知。当执行完毕后,这些值就会继续传给下一个处理器。

Définir les observateurs

Observateur : Le processeur utilisé pour recevoir les notifications des objets observables doit implémenter l'interface Observer. Cet objet définit certaines fonctions de rappel pour gérer les notifications qui peuvent être envoyées par l'objet observable. notifications.
Les objets Observer peuvent définir n'importe quelle combinaison de ces trois processeurs. Si vous ne fournissez pas de gestionnaire pour un certain type de notification, l'observateur ignorera les notifications de ce type.

// Create observer object
const myObserver = {
  next: (_data) => {
  	// next通知类型处理器
  },
  error: err => {
  	// error通知类型处理器
  },
  complete: () => console.log('Observer got a complete notification'),
};
Copier après la connexion

S'abonner

Une instance Observable publiera une valeur uniquement lorsqu'une instance de l'Observable est abonnée. Lors de votre inscription, vous devez d'abord appeler la méthode subscribe() de l'instance et lui transmettre un objet observateur pour recevoir des notifications.

Syntaxe : Observable.subscribe(ObserverObject), où Observable est l'instance d'objet observable et ObserverObject est l'objet observateur.

// 官网示例
// Create simple observable that emits three values
const myObservable = of(1, 2, 3);

// Create observer object
const myObserver = {
  next: x => console.log('Observer got a next value: ' + x),
  error: err => console.error('Observer got an error: ' + err),
  complete: () => console.log('Observer got a complete notification'),
};

// Execute with the observer object
myObservable.subscribe(myObserver);
// Logs:
// Observer got a next value: 1
// Observer got a next value: 2
// Observer got a next value: 3
// Observer got a complete notification
Copier après la connexion

De plus, la méthode Subscribe() peut également recevoir des fonctions de rappel définies dans la même ligne, qu'il s'agisse d'un gestionnaire suivant, d'erreur ou complet. Par exemple, l'appel Subscribe() suivant est équivalent à l'exemple précédent de spécification d'un observateur prédéfini.

myObservable.subscribe(
  x => console.log('Observer got a next value: ' + x),
  err => console.error('Observer got an error: ' + err),
  () => console.log('Observer got a complete notification')
);
Copier après la connexion

Remarque : Dans les deux cas, le gestionnaire de type de notification suivant est nécessaire, tandis que les gestionnaires d'erreur et complet sont facultatifs. L'appel

subscribe() renvoie un objet Subscription qui a une méthode unsubscribe(). Lorsque cette méthode est appelée, vous ne recevez plus de notifications.

Pour plus de connaissances sur la programmation, veuillez visiter : Vidéo de programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Parlons des métadonnées et des décorateurs dans Angular Parlons des métadonnées et des décorateurs dans Angular Feb 28, 2022 am 11:10 AM

Cet article poursuit l'apprentissage d'Angular, vous amène à comprendre les métadonnées et les décorateurs dans Angular, et comprend brièvement leur utilisation. J'espère qu'il sera utile à tout le monde !

Explication détaillée du gestionnaire d'état d'apprentissage angulaire NgRx Explication détaillée du gestionnaire d'état d'apprentissage angulaire NgRx May 25, 2022 am 11:01 AM

Cet article vous donnera une compréhension approfondie du gestionnaire d'état NgRx d'Angular et vous présentera comment utiliser NgRx. J'espère qu'il vous sera utile !

Comment installer Angular sur Ubuntu 24.04 Comment installer Angular sur Ubuntu 24.04 Mar 23, 2024 pm 12:20 PM

Angular.js est une plateforme JavaScript librement accessible pour créer des applications dynamiques. Il vous permet d'exprimer rapidement et clairement divers aspects de votre application en étendant la syntaxe HTML en tant que langage de modèle. Angular.js fournit une gamme d'outils pour vous aider à écrire, mettre à jour et tester votre code. De plus, il offre de nombreuses fonctionnalités telles que le routage et la gestion des formulaires. Ce guide expliquera comment installer Angular sur Ubuntu24. Tout d’abord, vous devez installer Node.js. Node.js est un environnement d'exécution JavaScript basé sur le moteur ChromeV8 qui vous permet d'exécuter du code JavaScript côté serveur. Être à Ub

Un article explorant le rendu côté serveur (SSR) dans Angular Un article explorant le rendu côté serveur (SSR) dans Angular Dec 27, 2022 pm 07:24 PM

Connaissez-vous Angular Universel ? Cela peut aider le site Web à fournir un meilleur support SEO !

Comment utiliser PHP et Angular pour le développement front-end Comment utiliser PHP et Angular pour le développement front-end May 11, 2023 pm 04:04 PM

Avec le développement rapide d'Internet, la technologie de développement front-end s'améliore et se répète constamment. PHP et Angular sont deux technologies largement utilisées dans le développement front-end. PHP est un langage de script côté serveur capable de gérer des tâches telles que le traitement des formulaires, la génération de pages dynamiques et la gestion des autorisations d'accès. Angular est un framework JavaScript qui peut être utilisé pour développer des applications monopage et créer des applications Web composées de composants. Cet article explique comment utiliser PHP et Angular pour le développement front-end et comment les combiner.

Angular + NG-ZORRO développent rapidement un système backend Angular + NG-ZORRO développent rapidement un système backend Apr 21, 2022 am 10:45 AM

Cet article partagera avec vous une expérience pratique d'Angular et apprendra comment développer rapidement un système backend en utilisant Angualr combiné avec ng-zorro. J'espère que cela sera utile à tout le monde !

Une brève analyse de la façon d'utiliser monaco-editor en angulaire Une brève analyse de la façon d'utiliser monaco-editor en angulaire Oct 17, 2022 pm 08:04 PM

Comment utiliser monaco-editor en angulaire ? L'article suivant enregistre l'utilisation de monaco-editor dans angulaire qui a été utilisé dans une entreprise récente. J'espère qu'il sera utile à tout le monde !

Une brève analyse des composants indépendants dans Angular et voir comment les utiliser Une brève analyse des composants indépendants dans Angular et voir comment les utiliser Jun 23, 2022 pm 03:49 PM

Cet article vous présentera les composants indépendants dans Angular, comment créer un composant indépendant dans Angular et comment importer des modules existants dans le composant indépendant. J'espère qu'il vous sera utile !

See all articles