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 冒泡到 app-operation，然后是 app-car-detail。

见

Answer 2

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

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

Answer 3

请在您的 child 上添加此功能 component.you 可以参考此文档 Component interaction

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

Angular - 发出的事件没有到达父组件

Angular - emitted event doesn't get through to parent component

javascript

eventemitter

typescript