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命名为app-operation，然后再显示app-car-detail。

请参阅Emit event through nested components in Angular2

Answer 2

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

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

Answer 3

请在您的子组件上添加此功能。您可以参考此文档Component interaction

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

角度发射的事件不会通过父组件

3 个答案: