찾다
웹 프론트엔드JS 튜토리얼Angular의 Observable(관찰 가능한 객체)에 대한 자세한 설명

이 기사에서는 Angular Observable에 대해 설명합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

Angular의 Observable(관찰 가능한 객체)에 대한 자세한 설명

추천 관련 튜토리얼: "angular Tutorial"

Observable Object (Observable)

Observable 객체는 애플리케이션 게시자와 구독자 간의 메시지 전송을 지원합니다.

Observable은 선언적입니다. 즉, 소비자가 구독할 때까지 실제로 실행되지 않는 값을 게시하도록 정의된 함수입니다.


observable에 의해 발생할 수 있는 세 가지 유형의 알림:

알림 유형 설명
next 필수입니다. 각 배송 값을 처리하는 데 사용됩니다. 실행이 시작된 후 0번 이상 실행될 수 있습니다.
error 선택사항. 오류 알림을 처리하는 데 사용됩니다. 오류로 인해 관찰 가능한 객체 인스턴스의 실행이 중단됩니다.
완료 선택사항. 완료 알림을 처리하는 데 사용됩니다. 실행이 완료되면 이 값은 계속해서 다음 프로세서로 전달됩니다.

Define Observer

Observer(관찰자): Observer 인터페이스를 구현하는 데 사용되는 프로세서는 Observer 인터페이스를 구현해야 합니다. 전송될 수 있는 알림 유형.
관찰자 개체는 이 세 가지 프로세서의 조합을 정의할 수 있습니다. 특정 알림 유형에 대한 핸들러를 제공하지 않으면 관찰자는 해당 유형의 알림을 무시합니다.

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

Subscription

Observable 인스턴스는 Observable 인스턴스가 구독될 때만 값을 게시합니다. 구독할 때 먼저 인스턴스의 subscribe() 메서드를 호출하고 이를 관찰자 개체에 전달하여 알림을 받아야 합니다.

구문: ​​Observable.subscribe(ObserverObject), 여기서 Observable은 관찰 가능한 객체 인스턴스이고 ObserverObject는 관찰자 객체입니다. Observable.subscribe(ObserverObject),其中,Observable为可观察对象实例,ObserverObject为观察者对象。

// 官网示例
// 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

另外,subscribe() 方法还可以接收定义在同一行中的回调函数,无论 next、error 还是 complete 处理器。比如,下面的 subscribe() 调用和前面指定预定义观察者的例子是等价的。

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')
);

注: 无论哪种情况,next通知类型的处理器是必要的,而error和complete处理器是可选的。

subscribe() 调用会返回一个 Subscription 对象,该对象具有一个 unsubscribe()rrreee

또한 subscribe() 메서드는 다음, 오류 또는 완료 처리기 여부에 관계없이 동일한 줄에 정의된 콜백 함수를 수신할 수도 있습니다. 예를 들어, 다음 subscribe() 호출은 미리 정의된 관찰자를 지정하는 이전 예제와 동일합니다.

rrreee

참고: 🎜 두 경우 모두 다음 알림 유형 처리기가 필요하지만 오류 및 완료 처리기는 선택 사항입니다. 🎜🎜🎜subscribe() 호출은 unsubscribe() 메서드가 있는 🎜Subscription 개체🎜를 반환합니다. 이 메서드가 호출되면 알림 수신이 중지됩니다. 🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 비디오🎜를 방문하세요! ! 🎜

위 내용은 Angular의 Observable(관찰 가능한 객체)에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
이 기사는 csdn에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
聊聊Angular中的元数据(Metadata)和装饰器(Decorator)聊聊Angular中的元数据(Metadata)和装饰器(Decorator)Feb 28, 2022 am 11:10 AM

本篇文章继续Angular的学习,带大家了解一下Angular中的元数据和装饰器,简单了解一下他们的用法,希望对大家有所帮助!

angular学习之详解状态管理器NgRxangular学习之详解状态管理器NgRxMay 25, 2022 am 11:01 AM

本篇文章带大家深入了解一下angular的状态管理器NgRx,介绍一下NgRx的使用方法,希望对大家有所帮助!

浅析angular中怎么使用monaco-editor浅析angular中怎么使用monaco-editorOct 17, 2022 pm 08:04 PM

angular中怎么使用monaco-editor?下面本篇文章记录下最近的一次业务中用到的 monaco-editor 在 angular 中的使用,希望对大家有所帮助!

项目过大怎么办?如何合理拆分Angular项目?项目过大怎么办?如何合理拆分Angular项目?Jul 26, 2022 pm 07:18 PM

Angular项目过大,怎么合理拆分它?下面本篇文章给大家介绍一下合理拆分Angular项目的方法,希望对大家有所帮助!

Angular + NG-ZORRO快速开发一个后台系统Angular + NG-ZORRO快速开发一个后台系统Apr 21, 2022 am 10:45 AM

本篇文章给大家分享一个Angular实战,了解一下angualr 结合 ng-zorro 如何快速开发一个后台系统,希望对大家有所帮助!

聊聊自定义angular-datetime-picker格式的方法聊聊自定义angular-datetime-picker格式的方法Sep 08, 2022 pm 08:29 PM

怎么自定义angular-datetime-picker格式?下面本篇文章聊聊自定义格式的方法,希望对大家有所帮助!

浅析Angular中的独立组件,看看怎么使用浅析Angular中的独立组件,看看怎么使用Jun 23, 2022 pm 03:49 PM

本篇文章带大家了解一下Angular中的独立组件,看看怎么在Angular中创建一个独立组件,怎么在独立组件中导入已有的模块,希望对大家有所帮助!

聊聊Angular Route中怎么提前获取数据聊聊Angular Route中怎么提前获取数据Jul 13, 2022 pm 08:00 PM

Angular Route中怎么提前获取数据?下面本篇文章给大家介绍一下从 Angular Route 中提前获取数据的方法,希望对大家有所帮助!

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

에디트플러스 중국어 크랙 버전

에디트플러스 중국어 크랙 버전

작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음

맨티스BT

맨티스BT

Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.

안전한 시험 브라우저

안전한 시험 브라우저

안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

PhpStorm 맥 버전

PhpStorm 맥 버전

최신(2018.2.1) 전문 PHP 통합 개발 도구