如何在同级组件之间传递数据而不使用$ scope？

Question

我正在以这种方式制作包含3个子组件的组件：

<header-component>
<side-component>
<main-component>

主要组成部分包含英雄列表。标头组件包含两个按钮，用于将主组件上的视图切换到列表或网格视图。

我现在遇到的问题是将数据从标头组件传递到主组件。因此，当我单击网格按钮时，主要内容上的视图应更改为网格视图，与行视图相同。

如何在角度1.5的子组件之间传递数据？

Answer 1

成分法

我建议您与Angular
2组件方法保持一致，并使用输入 / 输出方法。如果这样做，您将能够轻松迁移到Angular 2，因为组件在概念上是相同的（仅语法有所不同）。这就是您的操作方式。

因此，我们基本上希望头文件和主要组件与头文件共享状态，以便能够更改它。我们可以使用几种方法来使其工作，但是最简单的方法是利用中间父控制器属性。因此，假设父控制器（或组件）定义了view要由标头（可以读取和修改）和主（可以读取）组件使用的此属性。

标头组件 ：输入和输出。

这是简单的标头组件的外观：

.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: '&'
  }
})

这里最重要的部分是绑定。使用view: '<'我们指定的header组件将能够读取外部内容并将其绑定为view自己控制器的属性。使用onViewChange: '&'组件定义的输出：用于通过其所需通知/更新外部世界的渠道。标头组件将通过此通道推送一些数据，但是它不知道父组件将使用它做什么，因此它不在乎。

所以这意味着header控制器可以像

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

主要组成部分 ：输入。

主要组件更简单，只需定义接受的输入即可：

.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>

看看并玩简单的演示。

angular.module('demo', [])



.controller('RootController', function() {

  this.view = 'table'

})



.component('headerComponent', {

  template: `

    <h3>Header component</h3>

    <a class="btn btn-default btn-sm" ng-class="{'btn-primary': $ctrl.view === 'list'}" ng-click="$ctrl.setView('list')">List</a>

    <a class="btn btn-default btn-sm" 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: '&'

  }

})



.component('mainComponent', {

  template: `

    <h4>Main component</h4>

    Main view: {{ $ctrl.view }}

  `,

  bindings: {

    view: '<'

  }

})


<script src="https://code.angularjs.org/1.5.0/angular.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />



<div class="container" ng-app="demo" ng-controller="RootController as root">



    <pre>Root view: {{ root.view }}</pre>



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

    <main-component view="root.view"></main-component>



</div>

演示： http ：
//plnkr.co/edit/ODuY5Mp9HhbqA31G4w3t？p =
info

这是我写的一篇博客文章，详细介绍了基于组件的设计：http : //dfsq.info/site/read/angular-components-
communication