javascript - TypeError: ctx.onCreditChange 不是函数角度
问题描述
我有两个组件。组件 A 是父组件,组件 B 是子组件。组件 A 如下所示:
一个.html
<nb-box [onCreditChange]="onCreditChange"></nb-box>
A.ts
onCreditChange($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
你知道如何解决吗?
解决方案
父组件
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)
}
}
推荐阅读
- amazon-web-services - 将训练数据上传到 amazon p2 实例
- php - WM_SEC.AUTH_SIGNATURE PHP 示例
- python - 使用 pyautogui 如何将值附加到来自“locateCenterOnScreen”的坐标
- node.js - 如何在不使用 Atlas 或任何云数据库的情况下部署 MongoDB + express 应用程序?
- graphql - 如何列出节点的字段并转储它的数据?GraphQL 内省
- javascript - 如何安装 Three.js?
- javascript - 如何在函数内设置延迟 - setTimeout 的问题
- python - 如何将此字符串转换为python中的列表
- mongodb - mongodb管道:如何实现“if-else”?
- html - 保持网格字段为 100% 屏幕宽度