Angular @输出事件发射器不工作

我有一个子组件，它会发出这样的事件

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>

但是，由于控制台中的输出为空，父级似乎没有获取事件

我在这里遗漏了什么？

要修复

您的输出应该是

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

编辑

根据，不要将on与输出一起使用。只需将事件方法重命名为sort

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

要修复

您的输出应该是

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

编辑

根据，不要将on与输出一起使用。只需将事件方法重命名为sort

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

---

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

尝试（排序）不尝试（排序）

媒体列表生成器
...
...

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

尝试（排序）不尝试（排序）

媒体列表生成器
...
...

您正在尝试从onSort事件获取事件。但在你们班上没有这样的活动主持人

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

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

---

您正在尝试从onSort事件获取事件。但在你们班上没有这样的活动主持人

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

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

谢谢大家，我一定很累才看不到。谢谢大家，我一定很累才看不到。不，这违反了我们的指导方针。发射器名称中不应带有“on”前缀。这是因为还有另一种语法可以替代

（xxx）

，它现在是onSort上的

，看起来很奇怪。请留下一个参考：不，这违反了角度准则。发射器名称中不应带有“on”前缀。这是因为
（xxx）
还有另一种语法，现在是onSort上的
，看起来很奇怪。请留下一个参考：