如何在 2 个组件之间进行通信 - 兄弟组件（Angular 1.5.8）

Posted 2023-02-23

【中文标题】如何在 2 个组件之间进行通信 - 兄弟组件（Angular 1.5.8）

【英文标题】：How to communicate between 2 component - sibling components(Angular 1.5.8)

【发布时间】：2017-07-18 14:56:00

【问题描述】：

嘿，我有以下组件树：我有一个名为 rules 的根组件和两个名为 rulesPanel 和 rulesEditor 的子组件。

现在我可以创建子组件和母组件之间的通信了：

rulesEditor 可以调用规则组件并在他身上跳转一个事件。

rulesPanel 可以调用规则组件并在他身上跳转一个事件。

我想在两兄弟之间进行交流：

rulesEditor 和 rulesPanel。

我不想使用 $scope 或 $broadcast，我想通过组件自己的绑定来做到这一点。 我试图想办法这样做，但我得到的只是我可以调用上层但不能调用并行级别。

编辑： 我的问题与可能的重复不同， 我不想传递数据，我想在一个组件中执行一个函数，然后由于兄弟组件中的单击函数而在兄弟组件中执行另一个函数。

这是我的代码以及我目前所取得的成就：

var app = angular.module("app",[]);

angular.module('app').component('rules', 
  template: `
            <rules-panel dial-mom="$ctrl.receivePhoneCall(message)">
            </rules-panel>
            <rules-editor>
            </rules-editor>`,
  bindings: 
  ,
  controller: rulesController,
);

function rulesController()
  var self = this;
  self.receivePhoneCall = function(message)
    console.log("Hello Son");
    console.log("I got your message:",message)
  
  console.log("rulesController")


angular.module('app').component('rulesPanel', 
  template: `<h1>rulesPanel</h1>
              <button ng-click="$ctrl.callMom()">CallMom</button>
     <button ng-click="$ctrl.CallBrother()">CallBrother</button>`,
  bindings: 
    dialMom: '&'
  ,
  controller: rulesPanelController,
);

function rulesPanelController()
  var self = this;
  console.log("rulesPanelController");
  self.callMom = function()
    console.log("Call mom");
    self.dialMom(message:"Love you mom");
  
  
   self.CallBrother = function()
    console.log("Call brother");
  


angular.module('app').component('rulesEditor', 
  template: '<h1>rulesEditor</h1>',
  bindings: 
  ,
  controller: rulesEditorController,
);

function rulesEditorController()
  console.log("rulesEditorController")

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<div ng-app="app">
  
  <rules></rules>
  
</div>

【问题讨论】：

这可以通过父组件或通过公共服务来完成。这取决于具体情况哪种方式更好。如果只有一个“规则”，服务应该很好。

我有一个称为规则的父组件，我不需要为此提供服务。你能给我一个例子，说明子组件中发生的点击事件如何触发兄弟组件上的事件吗？感谢您的帮助。

通常在 MV* 框架中，事件不会横向或向下传递。事件向上传达；模型值向下传达。在多个地方进行状态更改违反了Single Source of Truth 原则。

How to pass data between sibling components without using $scope?的可能重复

我的错这真的是重复

【参考方案1】：

您可以使用半 Angular 2 组件方法。这意味着您可以使用输入/输出方法来实现这一点。

我会给你一个例子，你可以从那里学习。

假设您有一个标题和一个主要组件。

在您想要通知主组件的标题组件中，您可以引发如下事件：

.component('headerComponent', 
  template: `
    <h3>Header component</h3>
    <a ng-class="'btn-primary': $ctrl.view === 'list'" ng-click="$ctrl.setView('list')">List</a>
    <a ng-class="'btn-primary': $ctrl.view === 'table'" ng-click="$ctrl.setView('table')">Table</a>
  `,
  controller: function() 
    this.setView = function(view) 
      this.view = view
      this.onViewChange($event: view: view)
    
  ,
  bindings: 
    view: '<',
    onViewChange: '&'
  
)

通过绑定视图：'

标题控制器可以这样使用：

<header-component view="root.view" on-view-change="root.view = $event.view"></header-component> 

另一方面 main 更简单，它只需要定义它接受的输入：

.component('mainComponent', 
  template: `
    <h4>Main component</h4>
    Main view:  $ctrl.view 
  `,
  bindings: 
    view: '<'
  
)

最后全部连接在一起：

<header-component view="root.view" on-view-change="root.view = $event.view"></header-component>
<main-component view="root.view"></main-component>

这是plunker。

【讨论】：

感谢您的快速回复，但是这个 planker 没有回答我的问题我不想传递数据，我想在一个组件中执行一个函数，然后在同级中执行另一个函数组件作为兄弟组件中的单击功能的结果。