동위 구성 요소는 서로의 속성 및 메서드에 액세스할 수 없습니다. 이 기사에서는 공유 서비스를 활용하여 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에서 형제 구성요소 간에 어떻게 통신할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!