如何將參數傳遞給組件？

我想從父組件傳遞一個函數給子組件，並給它一個從父組件給孩子的參數。（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}）之類的對象映射」，但它似乎不適用於組件。

來源

2016-09-22 Marjan Kalanaki

如果您使用的是組件，您必須以組件的方式進行操作。看起來你有組件的層次結構（子/父）。

家長內部的功能和屬性可由子女使用require繼承。

require: { 
    parent: '^^parentComponent' 
}

這樣，如果父定義一個函數showOrHideSub，孩子們可以把它直接使用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>

來源

2016-09-22 19:35:55 gyc

謝謝你這麼多。有效：） –

在下面的代碼中將'item'更改爲'vm'。您正在綁定項目功能'showOrHideSub（item.id）'，它不存在。這是更新的代碼。

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

來源

2016-09-22 18:46:14

如何將參數傳遞給組件？

回答

相關問題