Angular 2에서 형제 구성 요소 통신을 구현하는 방법은 무엇입니까?

Angular 2의 형제 구성 요소 통신

Angular 2에서 형제 구성 요소 간의 데이터 흐름을 관리할 때 고려해야 할 몇 가지 접근 방식이 있습니다.

종속성 주입을 통한 공유 서비스

Angular 2 RC4에서 권장되는 솔루션은 종속성 주입을 통해 공유 서비스를 활용하는 것입니다. 구현은 다음과 같습니다.

shared.service.ts:

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

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

  insertData(data: string) {
    this.dataArray.unshift(data);
  }
}

parent.comComponent.ts(상위 구성 요소):

import {Component} from '@angular/core';
import {SharedService} from './shared.service';
import {ChildComponent} from './child.component';
import {ChildSiblingComponent} from './child-sibling.component';

@Component({
  selector: 'parent-component',
  template: `<h1 >Parent</h1>
        <div>
            <child-component></child-component>
            <child-sibling-component></child-sibling-component>
        </div>`,
  providers: [SharedService],
  directives: [ChildComponent, ChildSiblingComponent],
})
export class ParentComponent {} 

child.comComponent.ts(하위 구성 요소):

import {Component, OnInit} from '@angular/core';
import {SharedService} from './shared.service';

@Component({
  selector: 'child-component',
  template: `<h1 >I am a child</h1>
        <div>
            <ul *ngFor="#data in data">
                <li>{{data}}</li>
            </ul>
        </div>`
})
export class ChildComponent implements OnInit {
  data: string[] = [];
  constructor(private _sharedService: SharedService) { }
  ngOnInit(): any { this.data = this._sharedService.dataArray; }
}

child-sibling.comComponent.ts(하위 형제 구성 요소):

import {Component} from 'angular2/core';
import {SharedService} from './shared.service';

@Component({
  selector: 'child-sibling-component',
  template: `
          <h1 >I am a child</h1>
          <input type="text" [(ngModel)]="data"/>
          <button (click)="addData()"></button>`
})
export class ChildSiblingComponent {
  data: string = 'Testing data';
  constructor(private _sharedService: SharedService) {}
  addData() {
    this._sharedService.insertData(this.data);
    this.data = '';
  }
}

주요 고려 사항:

1. 공유 서비스 제공자는 하위 구성 요소가 아닌 상위 구성 요소에서만 지정해야 합니다.
2. 하위 구성 요소는 여전히 서비스를 삽입하고 가져와야 합니다.
3. 이전 Angular 2 베타 버전에서 수정하는 경우 import 문만 업데이트하세요.

위 내용은 Angular 2에서 형제 구성 요소 통신을 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!