javascript - Angular 输出不起作用 - instance[output.propName].subscribe 不是函数

Question

我的@Output 有问题，或者至少父组件中的事件有问题。父级 HTML:

<h1>Accountmanagement</h1>
<button class="add" (click)="onAddEmployee()">Add Employee</button>
<table>
  <tr>
    <th>Username</th>
    <th>E-Mail</th>
    <th>Discord</th>
    <th>First Name</th>
    <th>Forum</th>
    <th>Gitlab</th>
    <th>Redmine</th>
    <th>Gameserver</th>
    <th>Docu-Server</th>
  </tr>
</table>
<div class="overlay" *ngIf="showOverlay"></div>
<br>
<br>
<div class="interface" *ngIf="showOverlay">
  <employee-dialog [employee]="employee" (end)="onEnd($event)"></employee-dialog>
</div>

父 TS:

import { Component } from '@angular/core';
import { Employee } from '../../Dataclasses/Employee';
import { EmployeeDialog } from './EmployeeDialog/EmployeeDialog';

@Component({
    selector: 'employee-list',
    templateUrl: 'EmployeeList.html',
    styleUrls: ["EmployeeList.css"]
})
export class EmployeeList {
    employees: Employee[];
    employee: Employee = new Employee();
    showOverlay: boolean = false; //if the overlay and popup is shown
    constructor() {
        //intitialize employees (from DB)
    }

    onAddEmployee(): void {
        this.showOverlay = true;
    }

    onEnd(empl: Employee) {
        console.log("test");
    }
}

子 TS:

import { Component, Inject, Input, Output } from '@angular/core';
import { Employee } from '../../../Dataclasses/Employee';
import { EventEmitter } from 'events';

@Component({
    selector: 'employee-dialog',
    templateUrl: 'EmployeeDialog.html',
    styleUrls: ['EmployeeDialog.css']
})
export class EmployeeDialog {
    @Input() employee: Employee;
    @Output() end = new EventEmitter<Employee>();
    private isNew: boolean = false; //wether the employee is a new created or not - important for the conrirmation buttons at the end
    private cacheEmployee: Employee

    public ngOnInit(): void {
        if (this.employee.getUsername() == "") {
            this.isNew = true;
        }
        this.cacheEmployee = this.employee;
    }

    public cancel(): void {
        if (confirm("Do you want to discard all changes?")) {
            this.end.emit(this.cacheEmployee);
        }
    }

    public save(): void {
        //send to DB here too
        if (this.isNew) {
            //create accounts
        }

        if (this.employee.checkData()) {
            this.end.emit(this.employee);
        }
    }
}

重要的事情:我在 Parent-HTML 的以下行中收到错误:

  <employee-dialog [employee]="employee" (end)="onEnd($event)"></employee-dialog>

错误日志:

EmployeeList.html:20 ERROR TypeError: instance[output.propName].subscribe is not a function
    at createDirectiveInstance (core.js:12330)
    at createViewNodes (core.js:13784)
    at createEmbeddedView (core.js:13661)
    at callWithDebugContext (core.js:15098)
    at Object.debugCreateEmbeddedView [as createEmbeddedView] (core.js:14410)
    at TemplateRef_.createEmbeddedView (core.js:11736)
    at ViewContainerRef_.createEmbeddedView (core.js:11448)
    at NgIf._updateView (common.js:2845)
    at NgIf.set [as ngIf] (common.js:2801)
    at updateProp (core.js:12661)
View_EmployeeList_2 @ EmployeeList.html:20
EmployeeList.html:20 ERROR CONTEXT DebugContext_component: (...)componentRenderElement: (...)context: (...)elDef: {nodeIndex: 2, parent: {…}, renderParent: {…}, bindingIndex: 0, outputIndex: 0, …}bindingFlags: 0bindingIndex: 0bindings: Array(0)length: 0__proto__: Array(0)concat: ƒ concat()constructor: ƒ Array()copyWithin: ƒ copyWithin()entries: ƒ entries()every: ƒ every()fill: ƒ fill()filter: ƒ filter()find: ƒ find()findIndex: ƒ findIndex()forEach: ƒ forEach()includes: ƒ includes()indexOf: ƒ indexOf()join: ƒ join()keys: ƒ keys()lastIndexOf: ƒ lastIndexOf()length: 0map: ƒ map()pop: ƒ pop()push: ƒ push()reduce: ƒ reduce()reduceRight: ƒ reduceRight()reverse: ƒ reverse()shift: ƒ shift()slice: ƒ slice()some: ƒ some()sort: ƒ sort()splice: ƒ splice()toLocaleString: ƒ toLocaleString()toString: ƒ toString()unshift: ƒ unshift()values: ƒ values()Symbol(Symbol.iterator): ƒ values()Symbol(Symbol.unscopables): {copyWithin: true, entries: true, fill: true, find: true, findIndex: true, …}__proto__: ObjectcheckIndex: 2childCount: 1childFlags: 114688childMatchedQueries: 0directChildFlags: 114688element: {ns: "", name: "employee-dialog", attrs: Array(0), template: null, componentProvider: {…}, …}flags: 33554433matchedQueries: {}matchedQueryIds: 0ngContent: nullngContentIndex: nullnodeIndex: 2outputIndex: 0outputs: [{…}]parent: {nodeIndex: 0, parent: null, renderParent: null, bindingIndex: 0, outputIndex: 0, …}provider: nullquery: nullreferences: {}renderParent: {nodeIndex: 0, parent: null, renderParent: null, bindingIndex: 0, outputIndex: 0, …}text: null__proto__: ObjectelOrCompView: (...)elView: {def: {…}, parent: {…}, viewContainerParent: null, parentNodeDef: {…}, context: NgIfContext, …}component: EmployeeList {employee: Employee, showOverlay: true}context: NgIfContext {$implicit: true, ngIf: true}def: {factory: ƒ, nodeFlags: 33669123, rootNodeFlags: 1, nodeMatchedQueries: 0, flags: 0, …}disposables: (2) [ƒ, empty]initIndex: -1nodes: (5) [{…}, {…}, {…}, empty × 2]oldValues: [empty]parent: {def: {…}, parent: {…}, viewContainerParent: null, parentNodeDef: {…}, context: EmployeeList, …}parentNodeDef: {nodeIndex: 47, parent: null, renderParent: null, bindingIndex: 1, outputIndex: 1, …}renderer: DebugRenderer2 {delegate: EmulatedEncapsulationDomRenderer2, data: {…}}root: {ngModule: NgModuleRef_, injector: _NullInjector, projectableNodes: Array(0), selectorOrNode: "employee-list", sanitizer: DomSanitizerImpl, …}state: 13viewContainerParent: null__proto__: Objectinjector: (...)nodeDef: {nodeIndex: 3, parent: {…}, renderParent: {…}, bindingIndex: 0, outputIndex: 1, …}nodeIndex: 3providerTokens: (...)references: (...)renderNode: (...)view: {def: {…}, parent: {…}, viewContainerParent: null, parentNodeDef: {…}, context: NgIfContext, …}component: EmployeeList {employee: Employee, showOverlay: true}context: NgIfContext {$implicit: true, ngIf: true}def: {factory: ƒ, nodeFlags: 33669123, rootNodeFlags: 1, nodeMatchedQueries: 0, flags: 0, …}disposables: (2) [ƒ, empty]initIndex: -1nodes: (5) [{…}, {…}, {…}, empty × 2]oldValues: [empty]parent: {def: {…}, parent: {…}, viewContainerParent: null, parentNodeDef: {…}, context: EmployeeList, …}parentNodeDef: {nodeIndex: 47, parent: null, renderParent: null, bindingIndex: 1, outputIndex: 1, …}renderer: DebugRenderer2 {delegate: EmulatedEncapsulationDomRenderer2, data: {…}}root: {ngModule: NgModuleRef_, injector: _NullInjector, projectableNodes: Array(0), selectorOrNode: "employee-list", sanitizer: DomSanitizerImpl, …}state: 13viewContainerParent: null__proto__: Object__proto__: Object
View_EmployeeList_2 @ EmployeeList.html:20

我做错了什么？没有 (end)="onEnd($event)" 一切正常......？我只想处理事件并获取与 $events 一起传递的数据，以便在我的父类中使用它。已经感谢您的回答!

Answer 1

您需要从 '@angular/core'

导入 EventEmitter

改变

import { EventEmitter } from 'events';

到

import { EventEmitter } from '@angular/core';