如何促进 Angular 2 中兄弟组件之间的通信？

Angular 2 中的同级组件通信

Angular 2 在组件交互方面引入了重大变化，在同级组件之间传递数据可能是一个问题。以下是一些可行的解决方案：

使用共享服务

一种推荐的方法是使用共享服务。该服务可以充当组件之间数据交换的媒介，而无需相互直接访问。下面是一个示例：

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

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

// ParentComponent
import {SharedService} from './shared.service';

@Component({
  providers: [SharedService],
})
export class ParentComponent {}

// ChildComponent
import {SharedService} from './shared.service';

@Component()
export class ChildComponent {
  data: string[] = [];

  constructor(private _sharedService: SharedService) {}

  ngOnInit() {
    this.data = this._sharedService.dataArray;
  }
}

// ChildSiblingComponent
import {SharedService} from './shared.service';

@Component()
export class ChildSiblingComponent {
  data: string = 'Testing data';

  constructor(private _sharedService: SharedService) {}

  addData() {
    this._sharedService.insertData(this.data);
    this.data = '';
  }
}

通过将 SharedService 注入到两个子组件中，它们可以访问可以交换信息的通用数据结构。此方法还可以促进更复杂的交互，允许多个组件订阅共享数据中的更改。

注意：

• 仅包含共享服务提供者在父组件中。
• 将服务及其依赖项注入到所有必要的组件中。
• 通过使用正确的接口或静态类型确保类型安全。

以上是如何促进 Angular 2 中兄弟组件之间的通信？的详细内容。更多信息请关注PHP中文网其他相关文章！