我正在以这种方式制作包含3个子组件的组件:
<header-component> <side-component> <main-component>
主要组成部分包含英雄列表。标头组件包含两个按钮,用于将主组件上的视图切换到列表或网格视图。
我现在遇到的问题是将数据从标头组件传递到主组件。因此,当我单击网格按钮时,主要内容上的视图应更改为网格视图,与行视图相同。
如何在角度1.5的子组件之间传递数据?
我建议您与Angular 2组件方法保持一致,并使用输入 / 输出方法。如果这样做,您将能够轻松迁移到Angular 2,因为组件在概念上是相同的(仅语法有所不同)。这就是您的操作方式。
因此,我们基本上希望头文件和主要组件与头文件共享状态,以便能够更改它。我们可以使用几种方法来使其工作,但是最简单的方法是利用中间父控制器属性。因此,假设父控制器(或组件)定义了view要由标头(可以读取和修改)和主(可以读取)组件使用的此属性。
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: '&'组件定义的输出:用于通过其所需通知/更新外部世界的渠道。标头组件将通过此通道推送一些数据,但是它不知道父组件将使用它做什么,因此它不在乎。
view: '<'
header
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