Question

我有两个angular个组件。第一个组件是带有标记<my-list-comp></my-list-comp>的列表。我的第二个组件是带有标签<my-button-comp></my-button-comp>的按钮。在我的列表组件的模板中，我正在使用按钮组件，其标签如下：

模板my-list-comp.html：

<div class="list>
    <ul><!-- some stuff --></ul>
    <my-button-comp></my-button-comp>
</div>

模板my-button-comp.html：

<button routerLink="/goToOtherComponent">Click me!</button>

现在我的问题：是否可以使用标记(click)上的<my-button-comp></my-button-comp>来function controller中的my-list-comp，如下所示：

模板my-list-comp.html：

<div class="list>
    <ul><!-- some stuff --></ul>
    <my-button-comp (click)="myFunction()"></my-button-comp>
</div>

controller my-list.comp.ts：

myFunction() {
    console.log('hello world');
}

我上面尝试过，但它不起作用？这可能吗？没有找到关于这个主题的任何内容。

Answer 1

您需要使用EventEmitter和Output装饰器，如下所示：

我键式comp.ts

import { EventEmitter } from '@angular/core'; @Output() onBtnClick = new EventEmitter<undefined>();

我键式comp.html

<button (click)="onBtnClick.emit()">Click me!</button>

我一览comp.html

<div class="list> <ul></ul> <my-button-comp (onBtnClick)="myFunction()"></my-button-comp> </div>

Answer 2

对于角度组件，(something)语法引用从子组件到父组件的事件（请参阅here获取官方文档），因此您所做的事情无效。

如果你想触发一个从孩子到父母的东西，正确的做法是从孩子发送一个事件，并在父组件中有适当的监听器。

组件标签上的角度2（单击）

2 个答案: