引数を持つ関数をコンポーネントに渡すにはどうすればよいですか？

Question

親コンポーネントから子コンポーネントに関数を渡して、それに子コンポーネントの親コンポーネントから与えられた引数を渡したいとします。 （showOrHideSub = "item.showOrHideSub（item.id）"）私はさまざまな方法で試しましたが、うまくいきません。

これは、子コンポーネントタグを使用するhtml（親コンポーネント）です。 VMはこのスコープのコントローラーです。

<li ng-repeat="item in vm.menuItems"> 
<menu-item-comp id="item.id" showOrHideSub="item.showOrHideSub(item.id)" /> 
</li> 

ここに子コンポーネントテンプレートがあります。 itemVmは、このコンポーネントのコントローラである：ここで

<div id="{{itemVm.id}}" ng-mouseover="itemVm.showOrHideSub(itemVm.id)"> 
<div id="itemVm.subId" class="menuItemImgText">{{ itemVm.label }}</div> 

は、子コンポーネントのJSです：

module.component('menuItemComp', { 
     templateUrl: '/webapp/app/components/menu/menuItemComponent.html', 
     bindings: { 
      id: '<', 
      showOrHideSub: '&', 
      label: '<', 
      submenuId: '<', 
     }, 
     controllerAs: 'itemVm', 
     controller: ['LogService', menuCtrl] 
    }); 

    function menuCtrl($scope, LogService) { 

     var itemVm = this; 
    } 

そしてここでは、親コントローラでshowOrHideSub（）関数です：

vm.showOrHideSub = function (submenu) { 
     console.log(submenu); 
     switch (submenu) { 
      case 'menuItemDivPositions': 
       console.log('position'); 
       break; 
      case 'menuItemDivOther': 
       console.log('other'); 
       break; 
     } 
    } 

私はディレクティブで行う方法は、showOrHideSub = "item.showOrHideSub（{item：item.id}）"などのオブジェクトマッピングによるものですが、コンポーネントでは機能しないようです。

Answer 1

コンポーネントを使用している場合は、コンポーネントの方法で行う必要があります。 コンポーネントの階層（子/親）があるようです。

親内の関数と属性は、子によって継承され、requireを使用します。親が機能showOrHideSubを定義する場合

require: { 
    parent: '^^parentComponent' 
} 

この方法で、子どもたちが直接、これはあなたの問題を解決する唯一の方法ではありませんが、これは正しい方法™のためであるthis.parent.showOrHideSub(xxx)

を使用して、それを呼び出すことができますあなたが選んだ建築

var parentComponent = { 
 
    bindings: {}, 
 
    controller: ParentController, 
 
    template: ` 
 
     <li ng-repeat="item in $ctrl.menuItems"> 
 
     <child-component item="item"></child-component> 
 
     </li> 
 
    ` 
 
}; 
 
var childComponent = { 
 
    bindings: { 
 
     item: '<' 
 
    }, 
 
    require: { 
 
     parent: '^^parentComponent' 
 
    }, 
 
    controller: ChildController, 
 
    template: '<button ng-click="$ctrl.buttonClick($ctrl.item.id);">{{$ctrl.item.name}}</button>' 
 
}; 
 
function ParentController() { 
 
    this.menuItems = [{id:1, name:"item1"},{id:2, name:"item2"}]; 
 
    this.showOrHideSub = function(param) { 
 
    console.log("parent function called with param: " + param); 
 
    } 
 
} 
 
function ChildController() { 
 
    var vm = this; 
 
    this.buttonClick = function(id) { 
 
    vm.parent.showOrHideSub(id); 
 
    } 
 
} 
 

 
angular.module('app', []); 
 
angular.module('app') 
 
    .component('parentComponent', parentComponent) 
 
    .component('childComponent', childComponent);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
 
<div ng-app="app"> 
 
    <parent-component></parent-component> 
 
</div>

Answer 2

下記のコードで 'item'を 'vm'に変更してください。アイテム機能 'showOrHideSub（item.id）'が存在しません。ここに更新されたコードがあります。

<li ng-repeat="item in vm.menuItems"> 
    <menu-item-comp id="item.id" showOrHideSub="vm.showOrHideSub(item.id)" /> 
</li>