Angular EventEmitter 观察器未被调用

Question

我设置了我的项目的一小部分，我正在努力：https://stackblitz.com/edit/angular-ivy-ee7v5t

如果link失效，这里用最少的代码来理解问题：

options.component.html

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

@Component({
  selector: 'app-options',
  templateUrl: './options.component.html',
  ...
})
export class OptionsComponent implements OnInit {
  country: any;

  ...

  receiveCountry(country: any) {
    this.country = country;
    console.log("2");
  }
}

options.component.html

<app-country-selector (countrySelectedEvent)="receiveCountry($event)"></app-country-selector>

国家-selector.component.ts

@Component({
  selector: 'app-country-selector',
  ...
})
export class CountrySelectorComponent implements OnInit {
   @Output() countrySelectedEvent: EventEmitter<any> = new EventEmitter();

...

  onOptionSelected($event) { //gets called by angular material autocomplete
    let selectedCountry = this.countries.find(c => c.name.toLowerCase() == $event.option.value.toLowerCase());
    this.countrySelectedEvent.emit(selectedCountry);
    console.log("1");
  }
}

我希望在 country-selector.component 中选择自动完成中的值时调用 options.component。我想通过使用 EventEmitter 来实现这一点，并根据 angular 文档连接了代码 html 部分中的函数。

我添加了两个 console.logs 但只看到一个，另一部分让我感到困惑的是 EventEmitter 对象在他的数组中没有观察者。

一切都应该是正确的，但有些地方不对劲，我不知道是什么。

Answer 1

根据您的 stackblitz，从 app.module.ts 的 bootstrap 部分删除 CountrySelectorComponent。

您应该将所有公共组件放入声明部分

bootstrap—the root component that Angular creates and inserts into the index.html host web page.

Angular EventEmitter 观察器未被调用

Angular EventEmitter observer does not get called

angular

eventemitter