angular - @Output 事件发射器不工作

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

要修复，

你的输出应该是

@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>