Angular에서 관련 없는 두 구성 요소 간에 데이터를 공유하는 가장 간단한 방법

Angular 에서는 구성 요소가 서로 통신하는 방식을 아는 것이 중요합니다. 다른 구성 요소 내에서 구성 요소를 사용하는 경우 상위 자식 관계가 생성됩니다.  이러한 시나리오에서 부모 및 자식 구성 요소는 다음과 같은 방식으로 서로 통신합니다.

• @입력()
• @산출()
• 온도 참조 변수
• ViewChild and ContentChild

여기 @Input 여기 @Output 자세히 배울 수 있습니다. 이 블로그 게시물에서는 Angular 서비스를 사용하여 서로 관련되지 않은 구성 요소 간에 데이터를 공유하는 방법을 알아봅니다.

예제를 사용하여 이를 이해하려면 서비스를 만듭니다.  서비스에서 count 라는 변수를 만듭니다.  서비스는 구성 요소 간에 count 변수의 값을 공유합니다. count 변수를 만들기 전에 요구 사항에 대해 다시 이야기해 보겠습니다. 모든 구성 요소가 서비스를 사용하여 공유된 데이터의 마지막 업데이트 값에 액세스하기를 원합니다.

이를 위해서는 RxJS 주제에서 count 변수를 래핑해야 합니다. 정확히 말하면 BehaviorSubject를 사용하겠습니다.

counter = 1;
count: BehaviorSubject<number>;
constructor() {
   this.count = new BehaviorSubject(this.counter);
}

다음과 같은 이유로 BehaviorSubject를 사용하고 있습니다.

1. 서비스의 데이터는 멀티캐스트되어야 합니다. 각 소비자 구성 요소는 동일한 데이터 복사본에 액세스해야 합니다. 이를 위해 BehaviorSubject가 사용됩니다.
2. 본질적으로 유니캐스트이므로 관찰 가능 항목을 사용하지 않습니다. 구독자는 자신의 데이터 복사본을 갖게 됩니다.
3. BehaviorSubject는 현재 값을 저장합니다. 따라서 구성 요소는 항상 BehaviorSubject에 저장된 데이터의 현재 값을 읽습니다.

모든 것을 종합하면 간단한 데이터를 공유하는 서비스는 다음 코드 목록과 같습니다.

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
 
@Injectable({
    providedIn: 'root'
})
export class AppService {
    counter = 1;
    count: BehaviorSubject<number>;
    constructor() {
 
        this.count = new BehaviorSubject(this.counter);
    }
 
    nextCount() {
        this.count.next(++this.counter);
    }
}

이제 구성 요소는 공유 데이터에 액세스하기 위해 서비스를 사용할 수 있습니다. 예를 들어, 구성 요소에서 다음 목록에 표시된 대로 서비스를 사용할 수 있습니다.

export class Appchild2Component implements OnInit {
 
    count: number;
    constructor(private appsevice: AppService) {
    }
    ngOnInit() {
 
        this.appsevice.count.subscribe(c => {
            this.count = c;
        });
    }
    nextCount() {
        this.appsevice.nextCount();
    }
}

우리는 서비스를 구독하고 지역 변수에서 count 값을 읽고 있습니다. 또한 카운트를 증가시키는 함수가 있습니다.  템플릿에서 다음 코드 목록에 표시된 대로 공유 데이터를 표시하고 증가시킬 수 있습니다.

<h2>Count in component2  =  {{ count }}</h2>
<button (click)='nextCount()'>Next Count from component2</button>

이러한 방식으로 가능한 한 많은 구성 요소에서 서비스를 사용할 수 있으며 모든 곳에서 서비스에서 동일한 데이터를 공유할 수 있습니다. 참고로 여기에서 작동하는 stackblitz를 찾을 수 있습니다.

제 생각에는 이것이 Angular에서 관련 없는 구성 요소 간에 데이터를 공유 할 수있는 가장 간단한 방법입니다. 더 복잡한 시나리오에 더 나은 방법이 있다고 확신합니다. 다른 옵션을 알고 있다면 아래 의견에 몇 가지 아이디어를 제안하십시오.