Question

我有一个父组件说purchaseComponent，一个子组件说supplierComponent。当我在完整视图中加载时，供应商组件独立工作。此外，我在supplierComponent内的模式中成功加载了purchaseComponent。

当我点击addSupplier中的supplierComponent按钮时，我需要完成其当前功能，然后从hide调用purchaseComponent方法。

supplierComponent

angular.module('TestApp').component('addsupplierComponent', {
    templateUrl: 'addsuppliercomponent/addsupplier.html',
    controller: AddsupplierController,
    controllerAs: 'addsupplierCtrl'
});

function AddsupplierController(){
    var vm = this;
    vm.addSupplier = addSupplier;
    function addSupplier(){
        console.log("supplier component")
    }
}

purchaseComponent

angular.module('TestApp').component('purchaseComponent', {
    templateUrl: 'purchasecomponent/purchase.html',
    controller: PurchaseController,
    controllerAs: 'purchaseCtrl'
});
function PurchaseController(ProductService, LogService){
    var vm = this;
    vm.hideModal = hideModal;
    function hideModal(){
        console.log("Hide Modal")
    }
}

purchase.html

<div class="modal-body">
        <div class="card-content table-responsive">
            <addsupplier-component></addsupplier-component>
        </div>
 </div>

我需要的结果：从addSupplier点击purchaseComponent后，输出应为

Supplier component
Hide Modal

Answer 1

将[child]Component独立工作而不传递任何参数？因为我希望这也是一个独立的组成部分

要让子组件能够独立运行，请将表达式&绑定为&?可选，并在调用之前进行检查：

子组件

app.component('childComponent', {
    templateUrl: 'component/child.html',
    controller: ChildController,
    controllerAs: 'childCtrl',
    bindings: {
        onDone: '&?'
    }
});

function ChildController(){
    var vm = this;
    vm.done = function done(){
        console.log("child function")
        vm.onDone && vm.onDone();
    }
}

父组件

app.component('parentComponent', {
    templateUrl: 'component/parent.html',
    controller: ParentController,
    controllerAs: 'parentCtrl'
});
function ParentController(ProductService, LogService){
    var vm = this;
    vm.hideModal = hideModal;
    function hideModal(){
        console.log("Hide Modal")
    }
}

parent.html

<div class="modal-body">
    <div class="card-content table-responsive">
        <child-component on-done="parentCtrl.hideModal()">
        </child-component>
    </div>
</div>

通过使用可选表达式&?绑定，子组件可以独立运行：

<child-component></child-component>

来自文档：

通过向表达式添加@，可以使所有4种绑定（=，<，&和?）成为可选项。标记必须位于模式之后和属性名称之前。这对于优化提供的接口指令非常有用。

— AngularJS Comprehensive Directive API Reference - scope

Answer 2

您必须在组件绑定中传递隐藏功能

检查文档here

<强> addsupplierComponent

angular.module('TestApp').component('addsupplierComponent', {
    templateUrl: 'addsuppliercomponent/addsupplier.html',
    controller: AddsupplierController,
    controllerAs: 'addsupplierCtrl',
    bindings: {
        hideModal: '&'
    }
});

function AddsupplierController(){
   var vm = this;
   vm.addSupplier = addSupplier;
   function addSupplier(){
      vm.hideModal()
  }
}

<强> purchase.html

<div class="modal-body">
    <div class="card-content table-responsive">
        <addsupplier-component hide-modal="purchaseCtrl.hideModal()"></addsupplier-component>
    </div>
</div>

如何从Angular 1x中的嵌套子组件调用父组件中的函数

2 个答案:

子组件

父组件

parent.html