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

Question

嘿，我有以下组件树：我有一个名为 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>

Answer 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。