angularjs – 如何在角度1.5的子组件之间传递数据,不使用$scope？

我以这种方式使一个包含3个子组件的组件：

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

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

我现在的问题是将数据从头部组件传递到主要组件。所以当我点击网格按钮，主要内容上的视图应该改变为网格视图，同样为行视图。

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

组件方法

我建议你与Angular 2组件方法一致，并使用inputs/outputs 方法。如果这样做，您将能够轻松地迁移到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: '&'
  }
})

这里最重要的部分是绑定。使用视图：’<'我们指定头部组件将能够读取外部东西并将其绑定为自己的控制器的视图属性。使用onViewChange：'&'组件定义输出：用于通知/更新外部世界的任何所需的通道。头部组件将通过这个通道推送一些数据，但它不知道父组件将对它做什么，它不应该在乎。所以它意味着头控制器可以使用像

<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>
  `,onViewChange: '&'
  }
})

.component('mainComponent',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

原文链接：https://www.f2er.com/angularjs/145784.html

angularjs – 如何在角度1.5的子组件之间传递数据,不使用$scope？

猜你在找的Angularjs相关文章