TypeError: ctx.onCreditChange 不是函数角度

Question

我有两个组成部分。组件 A 是父组件，组件 B 是子组件。组件 A 如下所示：一个.html    <nb-box [onCreditChange]="onCreditChange"></nb-box>A.tsonCreditChange($event) { console.log($event) }组件 A 的功能转移到 B。组件 B 看起来像这样B.html<div class="box"> <nb-switch  (onChange)="onCreditChange($event)"></nb-switch></div>B.ts（该组件的一部分）import { Component, Input, NgModule, EventEmitter, Output} from '@angular/core';export class Box extends BoxBase {  @Output() onCreditChange: EventEmitter<any> = new EventEmitter()}调用函数时出现错误core.js:6241 ERROR TypeError: ctx.onChange is not a function你知道怎么修吗？

Answer 1

父组件

HTML

<nb-box (onCreditChange)="onCreditChange"></nb-box>

TS

onCreditChange($event) { console.log($event) }

子组件

错误从这里开始，因为 Output 不是一个函数，它是一个允许您将事件发送给父级的对象。您需要在子函数内部执行一个函数，并使用输出对象发出。

HTML

<div class="box">

 <nb-switch  (onChange)="onChangeInChild($event)"></nb-switch>

</div>

TS

import { Component, Input, NgModule, EventEmitter, Output} from '@angular/core';

export class Box extends BoxBase {

  @Output() onCreditChange = new EventEmitter<any>()

  onChangeInChild(eventObject: any){

      this.onCreditChange.emit(eventObject)

  }

}