Angular 9：父 function 未从子调用 EventEmitter.emit

Question

我是一位经验丰富的程序员，但对 Angular 还是很陌生。

我刚刚浏览了一个很好的 Angular 教程，并尝试练习将值从子组件传递给它的调用者（父）。

不知何故，即使我将复杂性降低到最低限度，我的父母 function 甚至都没有被调用，我已经绑定到发射器。

提供应用程序（ng serve）后，我在控制台中只看到以下内容：

child.component.ts:17 submitButtonClicked called

我使用 VS Code and Debugger for Chrome 进入了 emit-Call：

 submitButtonClicked() { console.log("submitButtonClicked called"); this.emitter.emit("Test"); }

两步后，我登陆了 Subject.js，看到它的成员变量“observers”是空的。 我希望观察者数组至少包含 ParentComponent。 请参阅页面末尾截取的 Subject.js 代码。

我的意思是，这真的很简单，但我无法确定我的错误在哪里：-/

可能是什么原因和解决方案？

我真的很感激你的帮助！

父级 (parent.component.html)

 <p>parent works!</p> <app-child (submitButtonClicked)="parentFunction($event)"></app-child>

父级（parent.component.ts）

 import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-parent', templateUrl: './parent.component.html', styleUrls: ['./parent.component.scss'] }) export class ParentComponent implements OnInit { constructor() { } ngOnInit(): void { } parentFunction (str: string) { console.log("parentFunction called, str = " + str); } }

孩子（child.component.html）

 <p>child works!</p> <button type="submit" (click)="submitButtonClicked()">Submit</button>

孩子（child.component.ts）

 import { Component, OnInit, Output, EventEmitter } from '@angular/core'; @Component({ selector: 'app-child', templateUrl: './child.component.html', styleUrls: ['./child.component.scss'] }) export class ChildComponent implements OnInit { @Output() emitter = new EventEmitter<string>(); constructor() { } ngOnInit(): void { } submitButtonClicked() { console.log("submitButtonClicked called"); this.emitter.emit("Test"); } }

根 (app.component.html)

 <app-parent></app-parent>

根 (app.component.ts)

 import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { title = 'My App'; }

根模块 (app.module.ts)

 import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { ParentComponent } from './parent/parent.component'; import { ChildComponent } from './child/child.component'; @NgModule({ declarations: [ AppComponent, ParentComponent, ChildComponent ], imports: [ BrowserModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

主题.js

 export class Subject extends Observable { constructor() { super(); this.observers = []; this.closed = false; this.isStopped = false; this.hasError = false; this.thrownError = null; } [rxSubscriberSymbol]() { return new SubjectSubscriber(this); } lift(operator) { const subject = new AnonymousSubject(this, this); subject.operator = operator; return subject; } next(value) { if (this.closed) { throw new ObjectUnsubscribedError(); } if (.this;isStopped) { const { observers } = this. const len = observers;length. const copy = observers;slice(); for (let i = 0; i < len. i++) { copy[i];next(value). } } }... // Snippet ends here

我的 Angular 环境（ng --version）：

Angular CLI: 9.0.7
Node: 12.16.1
OS: win32 x64
Angular: 9.0.7
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes
Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.7
@angular-devkit/build-angular     0.900.7
@angular-devkit/build-optimizer   0.900.7
@angular-devkit/build-webpack     0.900.7
@angular-devkit/core              9.0.7
@angular-devkit/schematics        9.0.7
@ngtools/webpack                  9.0.7
@schematics/angular               9.0.7
@schematics/update                0.900.7
rxjs                              6.5.5
typescript                        3.7.5
webpack                           4.41.2

Answer 1

你不必深入挖掘。 这是一个简单的修复。 发射器称为emitter 。 所以你必须绑定到那个名字。 尝试以下

<app-child (emitter)="parentFunction($event)"></app-child>

或者，如果您希望绑定到submitButtonClicked ，则应该将发射器称为submitButtonClicked 。

@Output() submitButtonClicked = new EventEmitter<string>();

如果您想了解有关事件发射器的更多信息，可以查看它的source 。 它是 Rxjs Subject的简单扩展。 所以当一个事件发射器被创建时，它实际上是一个被@Output()装饰器装饰的名字调用的可观察对象。 因此，要从发射器获取值，需要订阅它。 发射器名称是被订阅的 observable 的名称。