Question

我是Angular的新手，有一种特殊的情况我不明白如何建模。

我有一个main组件：

angular
  .module('synthApp')
  .component('main', {
    templateUrl: 'app/components/main.template.html',
    controller: MainController
  });

function MainController() {
  ...
}

它的main.template.html文件包含我拥有的另一个组件的两个实例，map组件：

<div>
    ...
    <map name="foo">
    ...
    <map name="bar">
    ...
</div>

map组件如下所示：

angular
  .module('synthApp')
  .component('map', {
    templateUrl: 'app/components/map.template.html',
    controller: MapController,
    bindings: {
      name: '='
    }
  });

function MapController() {
  var $ctrl = this;

  $ctrl.addMarker = function(coords, classId, popupMarkup) {
    ...
  };

  $ctrl.removeMarkers = function() {
    ...
  };
}

main控制器的方法需要在某些点为foo addMarker调用map，在其他点需要为{{1}调用addMarker地图。

父组件与子组件的特定实例进行通信的最佳做法是什么？

Answer 1

我要么设置一个带有服务的pub / sub，要么在父节点上执行$ rootScope。$ emit（＆＃39; nameOfInstance＆＃39;，message）并且子实例将通过$ rootScope设置一个监听器。$ on（＆＃39; nameOfInstance＆＃39;，function（message）{}）

<div>
    ...
    <map name="foo" event-name="instance1" >
    ...
    <map name="bar" event-name="instance2" >
    ...
</div>

在组件中添加：

 bindings: {
      name: '=',
      eventName : '@'
    }

function MapController(){
   var $ctrl = this;
   $rootScope.$on($ctrl.eventName, function(dataFromParent) {
     // do stuff based on message
   })
}

Angular 1.5组件与子组件的特定实例进行通信？

1 个答案: