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>

Answer 2

事件發射器僅影響組件的直接父對象，因此您需要將事件從app-add-operation擴展到app-operation，再擴展到app-car-detail。

請參閱通過Angular2中的嵌套組件發出事件

Answer 3

請將此功能添加到您的子組件上。您可以參考此文檔組件交互

 myEvent(event: any) {
     console.log(event);
  }