Angular - 发出的事件无法到达父组件

Question

我正在尝试从子组件向父组件发出事件。这是父文件 TS 文件的一部分：

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

@Component({
  selector: 'app-car-detail',
  templateUrl: './car-detail.component.html',
  styleUrls: ['./car-detail.component.css'],
})
export class CarDetailComponent implements OnInit {
  constructor() { }

  ngOnInit() {
    this.getCarDetail(this.route.snapshot.params['id']);
  }

  refreshList(event){
    console.log("Parent called");
  }
}

以及涉及发射器的模板部分

<app-operations (myEvent)="refreshList($event)"></app-operations>

这是子 TS 文件：

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


@Component({
  selector: 'app-add-operation',
  templateUrl: './add-operation.component.html',
  styleUrls: ['./add-operation.component.css']
})
export class AddOperationComponent implements OnInit {


  @Output() myEvent = new EventEmitter<any>();

  constructor() { }

  ngOnInit() {
  }

  callParent() {
    console.log('callparentmethod');
    this.myEvent.emit('eventDesc');
  }

}

和一个用于测试调用 callParent 方法的按钮：

<button (click)="callParent()">call</button>

当我单击按钮时，我可以看到 callParent 方法被触发，但应该在父级 (refreshList) 中触发的方法没有被触发。我查看了多个示例，但不明白为什么这不起作用。

Answer 1

您的视图引用了错误的组件。尝试这个：

<app-add-operation (myEvent)="refreshList($event)"></app-add-operation>