Angular에서 서비스를 사용하여 데이터 공유

Michael은 두 가지 구성 요소로 각도 프로젝트를 시작했습니다. 그는 입력 데코레이터를 사용하여 부모에서 자식 구성 요소로 데이터를 전달하고 출력 데코레이터를 사용하여 자식에서 부모 구성 요소로 데이터를 전달했습니다. 프로젝트가 성장함에 따라 그는 계속해서 프로젝트에 더 많은 구성 요소를 추가했고 어느새 그 프로젝트는 "분노의 질주"프랜차이즈만큼 커졌습니다.
이제 그의 프로젝트에는 10개 수준의 계층 구조가 있으며 최상위 구성 요소에서 최하위 구성 요소로 데이터를 전달하려면 10개 구성 요소 모두를 통해 데이터를 전달해야 합니다. Michael은 자신의 작업에 대해 슬퍼하며 이를 수행하는 더 좋은 방법이 있다는 것을 알고 있습니다. 그의 프로젝트를 청소하도록 도와주세요.

Michael은 서비스를 사용하여 이 문제를 해결하고 직접 관련되지 않은 구성 요소 간에 데이터를 공유할 수 있습니다. 따라서 한 구성 요소에서 다른 구성 요소로 데이터를 직접 전달하는 대신 미들웨어 서비스를 만들고 이를 브리지로 사용할 것입니다.

Observable을 사용하여 애플리케이션의 서비스에서 Pub-Sub 메커니즘을 생성합니다. 구성 요소 A가 데이터를 업데이트하려는 경우 서비스에 데이터를 게시하고 구성 요소 B가 값이 업데이트될 때마다 데이터 값을 가져오려고 하면 해당 데이터를 구독하고 값 변경에 대한 업데이트를 수신한다고 가정해 보겠습니다.

게시자, 구독자 및 미들웨어에 대한 코드 스니펫을 아래에 첨부합니다. 또한 YT channel here에서 볼 수 있는 비디오 자습서를 만들었습니다.

모든 구성 요소가 게시할 수 있고 다른 모든 구성 요소가 데이터 업데이트를 수신할 수 있는 미들웨어입니다.

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
    providedIn: 'root'
})
export class DataServiceService {

    private _dataStream = new BehaviorSubject("");
    constructor() { };

    getDataStream() {
        return this._dataStream.asObservable();
    }

    putDataToStream(data: string) {
        this._dataStream.next(data)
    }

}

이것은 구성 요소가 미들웨어에 데이터를 게시할 수 있는 방법입니다.

import { Component, OnInit } from '@angular/core';
import { DataServiceService } from '../../../../services/data/data-service.service';

import * as categorydata from './category.data.json';

@Component({
    selector: 'app-category',
    templateUrl: './category.component.html',
    styleUrls: ['./category.component.scss']
})
export class CategoryComponent implements OnInit {

    categories: any[] = (categorydata as any).default;
    categoryName: string = "This is Category Component";
    constructor(private dataService: DataServiceService) { }

    ngOnInit(): void { }

    changeVariable(e: string) {
        this.categoryName = e;
    }

    publishData() {
        this.dataService.putDataToStream('Data Published form Category');
    }

}

이것이 컴포넌트가 미들웨어를 구독하고 업데이트를 받는 방법입니다.

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { DataServiceService } from '../../services/data/data-service.service';

@Component({
    selector: 'app-card',
    templateUrl: './card.component.html',
    styleUrls: ['./card.component.scss']
})
export class CardComponent implements OnInit {

    @Input() data: any = {};
    @Output() passName = new EventEmitter();
    serviceData: string = "";

    constructor(private dataService: DataServiceService) {
        const data = this.dataService.getDataStream();
        data.subscribe({
            next: (data: string) => {
                this.serviceData = data;
            },
            error: (err: any) => {
                console.log(err);
            }
        })
    }

    ngOnInit(): void { }

}

읽어주셔서 감사합니다. 해피코딩 여러분!!!