> 웹 프론트엔드 > JS 튜토리얼 > Angular 2에서는 형제 구성 요소가 어떻게 통신할 수 있나요?

Angular 2에서는 형제 구성 요소가 어떻게 통신할 수 있나요?

Patricia Arquette
풀어 주다: 2024-11-30 04:51:10
원래의
326명이 탐색했습니다.

How can sibling components communicate in Angular 2?

형제 간 Angular 2 구성 요소 통신

Angular 2에서는 종속성 주입 및 공유 서비스를 통해 형제 구성 요소 통신이 가능합니다.

공유 서비스 접근 방식(Angular 2 RC4 및 나중에)

권장되는 접근 방식은 종속성 주입을 통해 형제 구성 요소가 액세스할 수 있는 공유 서비스를 만드는 것입니다. 예는 다음과 같습니다.

// shared.service.ts
@Injectable()
export class SharedService {
  dataArray: string[] = [];

  insertData(data: string) {
    this.dataArray.unshift(data);
  }
}
로그인 후 복사

상위 구성 요소:

// parent.component.ts
@Component({
  providers: [SharedService],
  directives: [ChildComponent, ChildSiblingComponent]
})
export class parentComponent { }
로그인 후 복사

형제 구성 요소:

// child.component.ts
constructor(private _sharedService: SharedService) { }
ngOnInit(): void {
  this.data = this._sharedService.dataArray;
}

// child-sibling.component.ts
constructor(private _sharedService: SharedService) {}
addData() {
  this._sharedService.insertData(this.data);
  this.data = '';
}
로그인 후 복사

이것의 장점 방법:

  • 구현이 간단함
  • 이벤트 이미터나 $rootScope.$broadcast 없이 형제 구성 요소 간의 직접 통신을 지원합니다
  • . 여러 사람 간의 데이터 공유 구성 요소

참고:

  • 상위 구성 요소에서만 서비스를 제공하고 두 하위 구성 요소 모두에서 서비스를 가져옵니다.

위 내용은 Angular 2에서는 형제 구성 요소가 어떻게 통신할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿