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中文网其他相关文章！