如何使用Angular 2在父元素上绑定事件答案

【问题标题】：How to bind event on parent's element using Angular 2如何使用Angular 2在父元素上绑定事件
【发布时间】：2016-07-19 11:15:41
【问题描述】：

我之前在子组件的模板中添加了一个按钮元素，但由于一些代码分离，我不得不将该按钮放在子模板之外（在父模板中）。

我不确定如何在该按钮上绑定click 事件，该事件最终会触发子组件上的功能。

请提出建议。

家长：

@Component({
 selector: 'app',
 template: `
   <button>Click me to call child's showMe()</button>
   <child></child>
 `
})

孩子：

@Component({
 selector: 'child',
 template: `Hi...`
})

class Child {
    public showMe() {
      console.log("ShowMe called...");
    }
   }

我不想将事件绑定代码放在父模板中，但想将按钮引用传递给子组件并在子组件本身内绑定事件。

【问题讨论】：

标签： angular

【解决方案1】：

您可以使用模板变量来引用兄弟姐妹

<button (click)="child.doSomething($event)">click me</button>
<child #child></child>

【讨论】：

谢谢..但我正在寻找类似于@ViewChild 的东西，这样我就可以将元素 id 传递给子组件，其余事件绑定可以在子组件本身内部完成..
请在您的问题中添加代码，以演示您尝试完成的工作。我无法从您的解释中推断出事物之间的关系。
我更新了我的答案。没有组件用户的支持（显式传递引用），没有干净的方法可以做到这一点
看来你的第一个答案很清楚。你能帮我解释第二个答案（更新）吗？我不清楚您正在使用 [button] 输入绑定在子组件内传递子引用。我猜想在子组件上传递按钮引用，即类似于<child [button]="#button"></child> 并在按钮元素上添加变量#button，即<button #button>click me</button>
我好像有点搞混了。我更新了我的答案。使用#child，可以从模板中引用该按钮。使用[child]="child"，我将此引用传递给Parent 组件的@Input() child:Child;。当点击按钮时，在子节点上调用showMe() 方法。