Question

我想将一个函数从父组件传递给子组件，并为它提供一个参数，该参数也是从父组件提供给子组件的。（showOrHideSub =＆＃34; item.showOrHideSub（item.id）＆＃34;）我尝试了不同的方法，但它不起作用。

这是我想要使用子组件标记的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 =＆＃34; item.showOrHideSub（{item：item.id}）＆＃34;但它似乎不适用于组件。

Answer 1

如果您正在使用组件，则必须按组件方式进行操作。看起来你有一个组件层次结构（子/父）。

父级中的函数和属性可以由使用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>

Answer 2

更改＆＃39;项目＆＃39;到＆＃39; vm＆＃39;在下面的代码中。您绑定了项目功能＆＃39; showOrHideSub（item.id）＆＃39;哪个不存在。这是更新的代码。

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

如何将带参数的函数传递给组件？

2 个答案: