如何将回调从父组件传递到嵌套路由组件？

Posted 2023-03-13

【中文标题】如何将回调从父组件传递到嵌套路由组件？

【英文标题】：How to pass down a callback from a parent component to a nested routed component?

【发布时间】：2017-08-23 16:48:00

【问题描述】：

我有以下格式，其中我有一个全局组件，其中包含 3 个基于给定路由激活的嵌套组件：

  $stateProvider
    .state('create-goal', 
      url: '/create-goal',
      component: 'createGoal',
      redirectTo: 'create-goal.step-1'
    )
    .state('create-goal.step-1', 
      url: '/step-1',
      component: 'step1'
    )
    .state('create-goal.step-2', 
      url: '/step-2',
      component: 'step2'
    )
    .state('create-goal.step-3', 
      url: '/step-3',
      component: 'step3'
    );

在主 create-goal html 文件中，我有以下内容：

  <ui-view goal="$ctrl.goal"
           goalInfo="$ctrl.goalInfo"
           processStep1="$ctrl.processStep1">
  </ui-view>

goal 和 goalInfo 工作得很好，因为它们是一种数据绑定方式的数据。但是，当我想传递一个函数（例如 processStep1 以计算对 step-1 等的某些操作时，该函数不会出现在 step-1 组件中，即使 goal 和 goalInfo做。

export default 
  name: 'step1',
  restrict: 'E',
  bindings: 
    goal: '<',
    processStep1: '&'
  ,
  template,
  controller
;

想法？

【问题讨论】：

你想什么时候调用 $ctrl.processStep1 函数？您能否也分享一些调用该函数的代码？

您使用的是哪个版本的ui-router？在升级到 1.0.12 之前我遇到了同样的问题，尽管我认为 1.0.3 也会添加此功能。

【参考方案1】：

有几种方法可以做到这一点。

使用 $parent 访问函数（我建议不要这样做，因为它是相对的，可能会导致问题 根据您的用例，使用“=function”或“&function”将其通过属性传递到每个子函数中 在可以在任何地方注入的辅助服务中设置函数。如果您打算大量使用它，并且如果它只是用于数据操作，那么它确实属于服务，以避免臃肿的控制器。 最后一种方法是使用模型。如果它是在某种类型的对象（例如可以轻松建模的用户）上运行的函数，这将是很好的。例如 .save 或 .update 函数。

https://docs.angularjs.org/guide/directive http://fdietz.github.io/recipes-with-angular-js/controllers/sharing-code-between-controllers-using-services.html https://www.sitepoint.com/tidy-angular-controllers-factories-services/ http://www.webdeveasy.com/angularjs-data-model/

【讨论】：

感谢您的提示，但我选择将来自父组件的回调传递给子组件。但是，如上所述，由于某种原因，它没有得到认可。我想看看我是否遗漏了什么......