在 Angular 1.x 中调用方法/触发子组件上的操作答案

【问题标题】：Call method / trigger an action on a child component in Angular 1.x在 Angular 1.x 中调用方法/触发子组件上的操作
【发布时间】：2017-06-24 15:06:03
【问题描述】：

我正在尝试在 Angular 1.6 中使用 component：

输入的单向数据绑定（例如< bindings 而不是=）
输出事件 (& bindings)。

从父组件调用子组件中的函数的最佳方法是什么？

在我的场景中，我的子组件将代表一个带有showModal() 函数的模式对话框。我想为要编辑的项目传入一个 ID（使用 < 输入绑定很容易），然后从父组件（项目列表）调用子组件的 showModal() 方法。

【问题讨论】：

我不明白这个问题。子组件知道何时传递了 ID，因此它可以自己调用 showModal()。
如你所说，我可以通过使用子组件的 $onChanges 钩子来判断何时在父组件中选择了一个项目（传递下来的 id 会改变）。但这不是我想触发showModal() 的地方。用户应该在父列表中选择一个项目，然后按下一个按钮，告诉子组件在有意义的情况下显示模式。

标签： javascript angularjs angular-components

【解决方案1】：

只需添加一个额外的绑定来控制对话框的可见性：。

'visible': '<'

$onChanges(changes) {
  if(changes.visible && changes.visible.currentValue) {
   this.showDialog();
  }
}

【讨论】：

【解决方案2】：

嘿，你可能已经知道了，但让我再指出一件最常见的事情，那就是从父母到孩子的广播事件，这是最有效的。

如果你知道用这样的数据广播事件

  $rootScope.$broadcast('resetDataRange',{id:1});

当你想调用子组件的方法时，你应该写到你的父组件中

在孩子中

      $rootScope.$on("resetIntraDataRange",function(data){

showModal(data.id); 

                });

这将在广播事件触发时调用，你会得到你想要的东西到 child 。

100% 有效解决方案

【讨论】：