Question

我是angular的新手，我正在努力接收父组件中的事件。我知道以前已经讨论过这个问题，但是以某种方式，我阅读的所有提示或教程都无法帮助我了解自己在做错什么...

在我的子component.ts中，我做这样的事情：

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

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css'],
  template: `<button class='btn btn-primary' (click)="nameChanged()">Click me</button> `
})
export class TestComponent implements OnInit {

    @Output() onTestEvent = new EventEmitter<string>()
    public text: string = "blah";

  constructor() { }

  ngOnInit() {
  }

  nameChanged() {
    console.log('Sending test event!');
    this.onTestEvent.emit(this.text)
  }
}

在我的父组件html文件中，我做这样的事情：

  <app-test>
    (onTestEvent)="handleTestEvent($event)"
  </app-test>

在我的父组件ts文件上，我做这样的事情：

  handleTestEvent(text: string) {
    console.log('handling test event....');
  }

我可以看到按下按钮时会调用nameChanged函数，但是由于某些原因，我没有在父组件中收到该事件……

Answer 1

必须放在标签内...

<app-test (onTestEvent)="handleTestEvent($event)">

</app-test>

父组件上的侦听事件的Angular 7问题

1 个答案: