Angular 구성 요소 간 통신

각도 v10.0.9

두 Angular 구성 요소 간에 처음으로 통신해야 했던 것은 부모/자식 관계였으며 @output 및 @input을 사용하면 꽤 쉽습니다.

하지만 처음으로 이 관계 없이 해야 했을 때 나는 완전히 길을 잃었습니다.

서비스 만들기

이제 관계로 연결되지 않은 두 개의 구성 요소가 있다고 가정하고 새 서비스를 만들어 보겠습니다.
ng g service <name>

name it like you want !

생성된 서비스는 다음과 같습니다.

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

@Injectable({
  providedIn: 'root'
})
export class DataService {
  // Your code here
}

주제

우리는 Observable의 특별한 유형인 Subject를 사용하여 많은 Observer에게 값을 멀티캐스팅할 수 있습니다!

서비스의 rxjs에서 주제 가져오기:

import { Subject } from 'rxjs'

이제 구성 요소 간에 공유할 데이터를 전달할 주제를 만들 수 있습니다.

data: Subject<Type> = new Subject();

Subject can be any Typescript type

끝났다 !

그래 진짜.

다음을 사용하여 서비스를 구성 요소로 가져오기만 하면 됩니다.

import { dataService } from "../services/data.service";

+

constructor(
    private sharedData: dataService,
  ) {}

데이터를 얻으려면

this.sharedData.data.subscribe(data => {
     //Do what you want with data 
})

data will be updated automatically

데이터를 설정하려면:

this.sharedData.data.next(newValue)

The data will be updated in ALL your components wich have subscribed to the value

.ltag__user__id__457505 .follow-action-button {
배경색: #1c0bba !중요;
색상: #c9d2dd !중요;
border-color: #1c0bba !중요;
}

니콜라스 라로드

Hi ! I'm Nicolas, Français living at bordeaux in South West of the France, I'm full stack (MEAN) developper !



Nik0w




읽어 주셔서 감사합니다! 이 글이 도움이 되셨나요? 공유할 수 있는 아이디어가 있습니까? 아래에 의견을 게시하십시오!

추신 이것은 나의 첫 번째 Angular 게시물입니다. 당신이 그것을 좋아하기를 바랍니다!