Question

最近我潜入了一个使用AngularJS的项目，发现自己陷入了混乱的世界。我很难理解Angular应该如何应用到我的项目中。

关于我的项目的一些背景知识，我有一些需要在开始时加载的部分。可以将其视为具有多个部分的高内容的SPA。

在这些部分中，我试图包含组件/指令。它们可能包含父子组件/指令，也可能是兄弟组件/指令。

我喜欢将它们模块化的概念，但我完全不知道如何让它们相互通信。对于父子指令/组件，我知道我可以使用includes / requires。

但如果我有一个兄弟组件，例如一个预加载器和一个旋转木马画廊组件，我找不到让他们互相交谈的方法。我怀疑我对方法和架构的理解是完全错误的。

请赐教，最后让我朝着如何解决这种情况的正确方向前进。

谢谢你们。

Answer 1

自1.5以来components。正如您可以在文档中阅读的那样，它们应该只有IN（用<绑定表示）和OUTs（&）。

当您希望两个兄弟组件进行通信时，您必须通过某个父组件执行此操作，该组件将一个组件的OUT分配给另一个组件的IN。看一个简单的例子：

angular.module('gyeong', [])
  .component('myView', {
    template: '<component-a on-some-task-finish="$ctrl.resultFromA = result"></component-a>' 
            + '<component-b priceless-result="$ctrl.resultFromA"></component-b>'
  })
  .component('componentA', {
    bindings: {
      'onSomeTaskFinish': '&'
    },
    template: '<p>This is component A. I {{ $ctrl.myData ? "have finished loading" : "am currently loading" }} the data.</p>',
    controller: function($timeout) {
      var self = this;
      $timeout(function() {
        self.myData = 'This is THE result';
        self.onSomeTaskFinish({
          result: self.myData
        });
      }, 2000);
    }
  })
  .component('componentB', {
    bindings: {
      'pricelessResult': '<'
    },
    template: '<p>This is component B. I {{ !$ctrl.pricelessResult ? "am waiting for the result" : "have received the result! It is " + $ctrl.pricelessResult }}.</p>'
  })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<div ng-app="gyeong">
  <my-view></my-view>
</div>

当然，还有其他选项（您提到的事件或服务）。但这是一个首选的（IMO），因为它维护单一责任组件，并且不公开它们的内部实现（你注意到我在每个“范围”中给出了相同结果的不同名称，没有'你呢？）。

了解AngularJS基于组件的体系结构方法

1 个答案: