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

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

Linda Hamilton
풀어 주다: 2024-11-14 13:40:02
원래의
375명이 탐색했습니다.

How Can I Communicate Between Sibling Components in Angular 2?

Angular 2 Sibling 구성 요소 통신

동위 구성 요소는 서로의 속성 및 메서드에 액세스할 수 없습니다. 이 기사에서는 공유 서비스를 활용하여 Angular 2의 형제 구성 요소 간 통신을 위한 간단한 메커니즘을 살펴봅니다.

공유 서비스 접근 방식

1. 공유 서비스:

커뮤니케이션 허브 역할을 할 공유 서비스를 만듭니다.

@Injectable()
export class SharedService {
    dataArray: string[] = [];

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

2. 상위 컴포넌트:

상위 컴포넌트에서 공유 서비스를 가져와 제공합니다.

import {SharedService} from './shared.service';
@Component({
    selector: 'parent-component',
    template: `<child-component></child-component>
               <child-sibling-component></child-sibling-component>`,
    providers: [SharedService]
})
export class ParentComponent { }
로그인 후 복사

3. 하위 구성 요소:

두 형제 구성 요소에 공유 서비스를 삽입합니다.

하위 구성 요소 1:

import {SharedService} from './shared.service'
@Component({
    selector: 'child-component',
    template: `...`
})
export class ChildComponent implements OnInit {
    data: string[] = [];
    constructor(private _sharedService: SharedService) { }
}
로그인 후 복사

하위 구성요소 2 (형제자매):

import {SharedService} from './shared.service'
@Component({
    selector: 'child-sibling-component',
    template: `...`
})
export class ChildSiblingComponent {
    data: string = 'Testing data';
    constructor(private _sharedService: SharedService) { }
}
로그인 후 복사

4. 데이터 공유:

형제 구성 요소는 공유 서비스의 데이터 배열을 수정할 수 있으며 이는 다른 형제 구성 요소에 반영됩니다.

addData() {
    this._sharedService.insertData(this.data);
    this.data = '';
}
로그인 후 복사

참고:

  • 공유 서비스 제공자를 여러 개 생성하지 않으려면 상위 구성 요소에만 포함하세요. 인스턴스.
  • 서비스를 가져와서 형제 구성 요소에 삽입합니다.
  • 베타보다 높은 Angular 2 버전에 대한 가져오기 문을 업데이트합니다.

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

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