如何将父组件函数传递给子组件，然后从子 AngularJS 内部调用它

Posted 2023-02-23

【中文标题】如何将父组件函数传递给子组件，然后从子 AngularJS 内部调用它

【英文标题】：How to pass a parent components function into a child and then call it from inside the child AngularJS

【发布时间】：2021-05-30 19:53:54

【问题描述】：

父函数

markAchievement() 
    console.log("Achievement marked")

绑定到父级的 html

<mark-goal-button clickEvent="$ctrl.markAchievement()"></mark-goal-button>

儿童绑定

export const markGoalButtonComponentDefinition = 
    bindings: 
        clickEvent: "&"
    ,
    template: html
;

孩子的html

<button ng-click="$ctrl.clickEvent()">
    <icon-add-goal></icon-add-goal>
</button>

这是我当前的设置，希望能够调用子按钮上的 markAchievement 函数，然后我希望运行来自父级的函数。

谁能看出我做错了什么？

【参考方案1】：

在父 HTML 中，大小写错误。

<mark-goal-button clickEvent="$ctrl.markAchievement()"></mark-goal-button>

应该是

<mark-goal-button click-event="$ctrl.markAchievement()"></mark-goal-button>

使用绑定时，请确保在 HTML 中使用蛇形盒。