Angular의 RxJS 시작 및 시작

app.component.ts 파일에 직접 코드를 추가하겠습니다. RxJS 라이브러리import {of, from} from 'rxjs'에서 가져오기부터 시작합니다.

다음으로 OnInit 수명 주기 후크와 적절한 가져오기를 구현합니다.

그런 다음 ngOnInit 메서드를 만듭니다. ngOnInit 에서 일련의 숫자를 사용하여 관찰 가능 항목을 만들고 정의해 보겠습니다. 각 숫자는 생성 함수에 전달되는 인수로 정의됩니다.

이제 뭐 ?

Observable을 어떻게 작동시키나요?

이 관찰 가능 항목을 시작하고 방출된 항목 수신을 시작하려면 구독합니다.

of(2,4, 6, 8).subscribe((item) => console.log(item));

We could pass an observer object into the subscribe with methods for next, error and complete.
But since we only want to implement the next method, we can pass it directly.

next 메서드에 대한 인수는 내보낸 항목이므로 항목을 내보낼 때마다 실행하려는 논리를 먼저 지정한 다음 화살표를 지정합니다. Observable이 다음 값을 내보낼 때마다 기록하고 싶으므로 console.log를 호출합니다.

자동으로 완료되므로 구독을 취소할 필요가 없습니다.

산출

숫자를 방출하고 완료하는 관찰 가능 항목을 만들었습니다.

이제 from create 함수를 사용해 봅시다.

Notice that we defined the numbers in an array and again call subscribe to start this observable and begin receiving emitted items. This time, let's pass in an observer with next, error and complete methods.

다음 메서드는 방출된 항목을 제공하고 이를 기록합니다.

    from ([20, 15, 10, 5]).subscribe({
      next: (item) => console.log(`resulting item.. ${item}` ),
      error: (err) => console.log(`error occurred ${err}`),
      complete: () => console.log('Completed')
    })

error 메서드는 오류를 제공하고 이를 기록합니다. 그리고 complete 메서드에는 인수가 없으므로 빈 괄호를 지정하고 메시지를 표시합니다.

로그 메시지의 문자열 보간을 위해 TypeScript 템플릿 문자열을 정의하기 위해 백틱을 사용하고 있습니다.

콘솔에 기록된 배열 요소와 전체 메시지를 볼 수 있습니다.


4개의 숫자를 내보내고 완료하는 관찰 가능 항목을 다시 만들었습니다.

app.components.ts 파일

import { Component, VERSION, OnInit } from '@angular/core';
import {of, from} from 'rxjs'

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  name = 'Angular ' + VERSION.major;

  ngOnInit(){
    of(2,4, 6, 8).subscribe((item) => console.log(item));
    from ([20, 15, 10, 5]).subscribe({
      next: (item) => console.log(`resulting item.. ${item}` ),
      error: (err) => console.log(`error occoured ${err}`),
      complete: () => console.log('Completed')
    })

of('Apple1', 'Apple2', 'Apple3').subscribe({
  next: (apple) => console.log(`Appled emmitted ${apple}`),
  error: (err) => console.log(`Error occured: ${err}`),
  complete: ()=> console.log('No more apples, go home')
})

  }
}

구독은 관찰 가능 항목을 시작한 다음 해당 문자열을 방출합니다. 관찰자는 이러한 방출에 반응하여 결과를 기록합니다.

요약

주목할 만한

시간 경과에 따라 방출된 이벤트 또는 값 모음

관찰자

Observable의 알림을 관찰합니다

.

알림을 처리하는 메서드: next(), error(), complete()

구독자

구독을 취소할 수 있는 관찰자

신청

구독자가 알림을 받을 준비가 되었음을 Observable에 알립니다

.

subscribe()가 구독을 반환합니다

.

읽어 주셔서 감사합니다.