Angular에서 상위가 아닌 구성 요소와 하위 구성 요소 간의 통신 방법에 대한 간략한 분석

Angular에서 부모-자식 구성 요소가 아닌 구성 요소 간에 통신하는 방법은 무엇입니까? 이번 글에서는 Angular non-parent-child 컴포넌트가 서비스를 통해 통신하는 방법을 소개하겠습니다. 도움이 되셨으면 좋겠습니다!

사실 상위 구성 요소와 하위 구성 요소 간에 값을 전달하는 경우 우리는 이에 대해 매우 익숙하며 비즈니스 구현 프로세스에서 매우 일반적입니다.

하지만 내 구현 프로세스에는 교차 수준(즉, 비부모 구성 요소와 하위 구성 요소 간의 값 전송)이 포함됩니다. 예, 계층별로 전달하고 상위 구성 요소에서 하위 구성 요소의 전달된 값을 얻을 수 있습니다. 더 좋은 방법이 있나요? [관련 튜토리얼 추천: "angular tutorial"]

요구사항 배경:

에는 3차 컴포넌트로 이해될 수 있는 하위 컴포넌트가 있습니다. 이 컴포넌트에는 드롭다운 상자가 있습니다. 특정 li 태그를 클릭하면 해당 선택된 값이 첫 번째 수준 구성 요소에 전달되어야 합니다. 동시에 첫 번째 수준 구성 요소는 수신된 값으로 목록 인터페이스를 요청한 다음 데이터를 새로 고칩니다.

초기 아이디어:

당시에는 사용자가 선택한 값을 localstorage를 통해 저장한 다음, 사용 중인 컴포넌트에서 localstorage를 통해 값을 꺼내고, 그 값으로 인터페이스를 요청하려고 생각하고 있었습니다. , 실시간으로 수행할 수 없습니다. 사용자가 선택한 후에는 상위 구성 요소에서 데이터를 가져오도록 트리거되지 않습니다. 즉, 하위 구성 요소의 값이 변경되면 어떻게 상위 구성 요소에 알릴 수 있습니까?

기술 포인트:

Angular 상위 구성 요소와 하위 구성 요소는 서비스를 통해 통신합니다.

상위 구성 요소와 하위 구성 요소는 동일한 서비스를 공유하며 이 서비스를 사용하여 구성 요소 패밀리 내에서 양방향 통신을 달성합니다.

이 서비스 인스턴스의 범위는 상위 구성 요소와 해당 하위 구성 요소로 제한됩니다. 이 구성 요소 하위 트리 외부의 구성 요소는 서비스에 액세스하거나 통신할 수 없습니다.

원칙

상위 구성 요소와 하위 구성 요소는 동일한 서비스를 공유하며, 이 서비스는 구성 요소 제품군 내에서 양방향 통신을 달성하는 데 사용됩니다.

이 서비스 인스턴스의 범위는 상위 구성 요소와 해당 하위 구성 요소로 제한됩니다. 이 구성 요소 하위 트리 외부의 구성 요소는 서비스에 액세스하거나 통신할 수 없습니다. 서비스는 다른 구성 요소에 쉽게 주입될 수 있고 Subject 객체가 이 객체를 구독하는 구성 요소에 데이터를 멀티캐스트(전송)할 수 있기 때문에 하위 구성 요소와 상위 구성 요소 사이의 브리지입니다. 따라서 Rxjs의 Angular Service 및 Subject와 결합하면 구성 요소 간의 데이터 통신을 쉽게 실현할 수 있습니다.

구현:

하위 구성 요소에 서비스 파일을 생성합니다. 코드는 다음과 같습니다.

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

@Injectable({
  providedIn: 'root'
})
export class HeaderActionService {
  public pageTenantMode = new Subject<string>();
  // 获得一个Observable;
  missionConfirmed$ = this.pageTenantMode.asObservable();
  constructor() {}

  setParams(params) {
    this.pageTenantMode.next(params);
  }
}

하위 구성 요소 데이터 계층은 위 메서드를 호출하고 값을 전달합니다.

this.tenantModeService.setParams（）

상위 구성 요소가 호출하는 위치에 위 서비스를 삽입합니다. 코드는 다음과 같습니다.

    headerModeService.missionConfirmed$.subscribe(
        () => {
          this.mode = headerModeService.pageTenantMode;
          this.initTableData();
        }
      );

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 소개를 방문하세요. !

위 내용은 Angular에서 상위가 아닌 구성 요소와 하위 구성 요소 간의 통신 방법에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!