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中文網其他相關文章！