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 중국어 웹사이트의 기타 관련 기사를 참조하세요!