Question

我有一个子组件可以发出像这样的事件......

import { Component, OnInit, Output, EventEmitter } from '@angular/core';

@Component({
    selector: 'app-rate-sort',
    templateUrl: './rate-sort.component.html'
})
export class RateSortComponent implements OnInit {

    @Output() sort = new EventEmitter<string>();

    constructor() { }

    ngOnInit() {
    }

    sortBy(string) {
        this.sort.emit(string);
    }

}

这应该是将模板上的按钮调用的字符串传递给父类，如...

<header class="bg-white">
    <h4 class="text-primary my-0 mr-3">Media List Builder</h4>
    <div class="inner">
        ...
        <div class="wrapper">
            <app-rate-sort (onSort)="onSort($event)"></app-rate-sort>
        </div>
    </div>
    <div class="utility">
        ...
    </div>
</header>

然后在父组件中，我有一个处理事件的简单方法...

onSort(event) {
    this.sortKey = event;
    console.log(event);
}

然而，似乎父节点没有得到事件，因为控制台中的输出是空的。

我在这里缺少什么？

Answer 1

在父组件中使用事件名称时，事件名称已更改。

尝试（排序）不（onSort）

<header class="bg-white">
    <h4 class="text-primary my-0 mr-3">Media List Builder</h4>
    <div class="inner">
        ...
        <div class="wrapper">
            <app-rate-sort (sort)="onSort($event)"></app-rate-sort>
        </div>
    </div>
    <div class="utility">
        ...
    </div>
</header>

Answer 2

要修复，

您的输出应为

@Output() onSort = new EventEmitter<string>();

也

sortBy(string) {
        this.onSort.emit(string);
 }

修改

根据 angular guidelines ，请勿对输出使用on。只需将您的事件方法重命名为sort。

<div class="wrapper"> <app-rate-sort (sort)="onSort($event)"></app-rate-sort> </div>

Answer 3

您正在尝试从onSort事件中获取事件。但是你班上没有事件发生者。

您应该将父组件的模板更改为此。

<div class="wrapper">
       <app-rate-sort (sort)="onSort($event)"></app-rate-sort>
</div>

@Output事件发射器不工作

3 个答案: