Angular의 BehaviorSubject 및 Observable

1. Angular에서 BehaviorSubject와 Observable의 주요 차이점
2. Angular에서 Observable이란?
3. Angular에서 BehaviorSubject란 무엇입니까?
4. Angular에서 BehaviorSubject의 예

Angular BehaviorSubject는 Observable 소스에서 방출된 마지막 값을 방출하는 주제입니다. 대조적으로 observable은 시간이 지남에 따라 값을 방출하는 데 사용됩니다.

Angular는 이를 사용하여 HTTP 요청이나 사용자 입력과 같은 이벤트 또는 데이터 스트림을 처리합니다. 또한 일반적으로 관찰자가 개체의 상태 변경에 대해 알려야 할 때 사용됩니다.

구체적으로 BehaviorSubject와 Observable의 차이점에 대해 알아보겠습니다.

Angular에서 BehaviorSubject와 Observable의 주요 차이점

BehaviorSubject는 정의된 기능이 있는 Angular Observable입니다. 이론적으로 Observable의 하위 유형입니다. Observable은 일반적입니다. 주체는 BehaviorSubject의 도움으로 옵저버블을 구성하는 데 사용할 수 있습니다.

주요 차이점은 next() 메소드를 사용하여 관찰 가능 항목에 데이터를 전달할 수 없다는 것입니다.

Angular Observable과 BehaviorSubject의 기본 개념에 대해 논의해 보겠습니다.

Angular에서 Observable이란?

Angular 애플리케이션에서 RxJS는 옵저버블을 제공합니다. Observable은 작성자와 사용자 간의 데이터 공유를 용이하게 합니다.

‘Observable’은 이벤트 관리, 비동기 컴퓨팅 및 여러 속성 관리를 위한 더 나은 전략입니다.

Observables의 독특한 측면은 구독한 소비자가 구성 요소를 구현하지 않는 것처럼 구독한 사용자만 이를 처리할 수 있다는 것입니다. 사용자는 구독하기 전까지만 업데이트를 받을 수 있습니다.

Angular에서 BehaviorSubject란 무엇입니까?

일반적으로 주제는 세 가지 방식으로 구현되며, 각각은 서로 다른 기능을 제공하며 다양한 응용 프로그램에 적용할 수 있습니다.

1. ReplaySubject: 이 개체는 푸시된 모든 값을 추적합니다. 소스에서 내보낸 모든 항목을 구독한 모든 관찰자에게 배포합니다.
2. BehaviorSubject: 현재 값을 저장하는 항목입니다. BehaviorSubject를 구독하는 관찰자는 그렇게 하는 동안 시간이 지남에 따라 값을 받게 됩니다.
3. AsyncSubject: 가장 최근 값을 저장하고 시퀀스가 ​​끝날 때마다 전송합니다.

Angular의 ‘BehaviorSubject’를 사용하면 ‘Observable’에 값을 보내고 검색할 수 있습니다. 예를 들어 접근 제어 상태는 진화하는 값을 제공하는 ‘BehaviorSubject’입니다.

이 시나리오에서 BehaviorSubject의 주요 목표는 모든 사용자가 최종 값을 받도록 하는 것입니다.

구독 시 항상 값을 제공해야 하므로 다음 값을 획득하지 않은 경우에도 동작 주제에는 시작 값이 필요합니다. 구독 시 주제의 가장 최근 값을 반환합니다.

getValue() 메소드는 관찰 불가능한 코드에서 주제의 마지막 값에 언제든지 액세스하는 데 사용할 수 있습니다.

또한 초기 상태를 반영하기 위해 BehaviorSubject 함수 Object()에 인수가 제공됩니다. 상태에 대한 요구 사항이 설정되고 추가 구독이 이루어지면 BehaviorSubject는 가장 최신 상태를 먼저 제공합니다.

Angular에서 BehaviorSubject의 예

위에서 언급한 논의를 더 잘 이해하기 위해 예제를 논의해 보겠습니다.

App.component.ts:

import { Component } from "@angular/core";
import { BehaviorSubject } from "rxjs";
interface Directory {
  name: string;
  id: string;
}
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  name: string;
  id: string;

  directories: BehaviorSubject<Directory[]> = new BehaviorSubject<Directory[]>(null);
  constructor() {
    this.directories.next([
    ]);
  }
  add() {
    const currentItems = this.directories.getValue();
    currentItems.push({ name: this.name, id: this.id });
  }
  delete() {
    const currentItems = this.directories.getValue();
    const itemsWithoutDeleted = currentItems.filter(d => d.id !== this.id);
    this.directories.next(itemsWithoutDeleted);
  }
}

App.component.html:

<h1>Example of Angular BehaviorSubject</h1>
<h3>Write anything in the box that you want to add in the directory list.</h3>
<ul>
	<li *ngFor="let directory of (directories | async)">
		{{ directory.name }}
	</li>
</ul>
<input type="text" [(ngModel)]="name" size="20" />
<br/>
<br/>
<button (click)="add()">Add</button>
<br/>
<br/>
<button (click)="delete()">Delete</button>
<hr />

BehaviorSubject는 소스 Observable이 내보낸 마지막 값을 내보냅니다. 이는 특정 기간 동안 최신 값을 유지해야 하는 경우에 유용할 수 있습니다.

Observable은 데이터 세트의 모든 변경 사항을 알아야 하지만 새 값으로 데이터를 업데이트할 때 BehaviorSubject만큼 효율적이지 않을 때 유용합니다.

코드의 라이브 데모를 확인하려면 여기를 클릭하십시오.