Angular EventEmitter 观察器未被调用
Angular EventEmitter observer does not get called
我设置了我的项目的一小部分,我正在努力: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 对象在他的数组中没有观察者。
一切都应该是正确的,但有些地方不对劲,我不知道是什么。
根据您的 stackblitz,从 app.module.ts 的 bootstrap 部分删除 CountrySelectorComponent。
您应该将所有公共组件放入声明部分
bootstrap—the root component that Angular creates and inserts into the index.html host web page.
我设置了我的项目的一小部分,我正在努力: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 对象在他的数组中没有观察者。
一切都应该是正确的,但有些地方不对劲,我不知道是什么。
根据您的 stackblitz,从 app.module.ts 的 bootstrap 部分删除 CountrySelectorComponent。
您应该将所有公共组件放入声明部分
bootstrap—the root component that Angular creates and inserts into the index.html host web page.